How to Change Text Value Upon Button Press in React Native

const data = [{ "name": "lorem ipsum", "description": "description1", "company_name": "PT dapibus ", "company_slug": "pt-dapibus", "watchlist": true, "id": 1 },{ "name": "lorem ipsum2", "description": "description2", "company_name": "Google", "company_slug": "company_slug", "watchlist": true, "id": 2 }]

function RenderFeeds({ feeds, onAddToWatch, onRemoveFromWatch }) {
  return (
    <React.Fragment>{/* or any markup you want */}
      {feeds.map((feed) => (
        <div className="feed" key={feed.id}>
          <h1>{feed.name}</h1>
          <h2>{feed.company_name}</h2>
          <h2>{feed.description}</h2>
          <button
            onClick={() =>
              feed.watchlist
                ? onRemoveFromWatch(feed.id)
                : onAddToWatch(feed.id)
            }
          >
            {feed.watchlist ? 'Remove From watchlist' : 'Add to watchlist'}
          </button>
        </div>
      ))}
    </React.Fragment>
  );
}

function Feed() {
  const [feeds, setFeeds] = React.useState([]);

  React.useEffect(() => {
    //receiving data, for example fetching data by ajax or whatever
    setFeeds(data);
  }, []);

  const handleAddToWatch = (id) => {
    // implement updating feeds, for example making an ajax request and getting new data
    setFeeds((feeds) =>
      feeds.map((feed) => ({
        ...feed,
        watchlist: feed.id == id ? true : feed.watchlist,
      }))
    );
  };
  const handleRemoveFromWatch = (id) => {
    // implement updating feeds, for example making an ajax request and getting new data
    setFeeds(feeds =>
      feeds.map((feed) => ({
        ...feed,
        watchlist: feed.id == id ? false : feed.watchlist,
      }))
    );
  };

  return (
      <RenderFeeds
        feeds={feeds}
        onAddToWatch={handleAddToWatch}
        onRemoveFromWatch={handleRemoveFromWatch}
      />
  );
}

ReactDOM.render(<Feed/>, document.getElementById('root'))

.feed{
  border: 2px solid #ccc;
  padding: 15px;
  margin: 15px;
}

.feed h1{ margin: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

ReactJS: How to change Text value on button click

You're right, informed Text doesn't have a prop value, I found a trick on how to set the value of the Text on a click of a button.

You can create a ref using React.createRef to your Text then set the value via this ref.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  state = {
    min: 10
  };
  changeQt = () => {
    this.ref.current.value = 20;
  };
  render() {
    return (
      <div className="App">
        <Text
          initialValue={`${this.state.min}`}
          field="quantity"
          onChange={this.handleChange}
          label=""
          ref={this.ref}
        />
        <button onClick={this.changeQt}>Click</button>
      </div>
    );
  }
}

Demo here.

Change a button color when textinput is null, by using onPress

You use a controlled input field. You store the value in your state and you change it onChange with the input field. Next step is to set a style for your button depending on your current state.

<TextInput
    style={[styles.input, value === '' ? styles.red : null]}
    onChangeText={setValue}
    value={value}
    disabled
    placeholder='Введите название дела...'
    autoCorrect={false}
    autoCapitalize='none'
  />

In this case you need to add a style called "red" which changes the button color.

red: {
  backgroundColor: 'red'
}

Something like this.

Because your state is updated every time you change the input value, it gets updated onChange. If you want to set it on submit you need to add a isSubmitted boolean (default false ) to your state and set it to true in your pressHandler.
You need to destructure isSubmitted in this example:

style={[styles.input, value === '' && isSubmitted ? styles.red : null]}

How to display a random text from array on a button press in React Native?

Put it into state and display that state. Change state when button is clicked:

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {

  const [textValue, setTextValue] = useState('');

  words = [...]

  const changeTextValue = () => {
    const len = words.length;
    setTextValue(words[Math.floor(Math.random() * len)].text)
  }

  return (
    <View style={styles.container}>
      <Text>{textValue}</Text>
      <Button onPress={changeTextValue} title='Press me'/>
      <StatusBar style="auto" />
    </View>
  )
}

---

Related Topics