React: How to update an input box text when click a button?

Question

In React, suppose have an input box in container1 and a button in container2. If type in the input box, need show the user's inputs. Currently, Container1\input box: has a local state to track its inputs Container2\button: string "Click Me" is saved in Redux store

Need implement: If click the button, show "Click Me" in the input box. How to implement this in React/Redux?

Container1 keeps the state for Input box. Has method for updating the state. Export method. Import method in container 2, pass to button as prop or state. Button calls method when pressed. Presto. — Kasey Chang
– Kasey Chang, Commented May 22, 2020 at 7:11
I don't understand very well your question. Please, can you update it? When the button is clicked: 1. you want to put something inside inputbox or 2. you want to put the context of input elsewhere. (Where?) — Stoic Lion
– Stoic Lion, Commented May 22, 2020 at 7:31

Drew Reese · Accepted Answer · 2020-05-22 05:30:16Z

2

Use some component state. The input is a controlled input with value set from state and updates state on onChange, and the button updates state on onClick.

I don't quite understand the latter half of your question though. The input doesn't need to know/understand what a button is or if it was clicked, and the button doesn't need to know it's updating a value of an input. They are completely independent of each other and the state of the component is the only thing that "links" them.

export default function App() {
  const [value, setValue] = useState('');
  return (
    <div className="App">
      <input type='text' value={value} onChange={e => setValue(e.target.value)} />
      <button type="button" onClick={() => setValue('Click Me')}>Click Me</button>
    </div>
  );
}

edited May 22, 2020 at 5:30

answered May 22, 2020 at 5:24

Drew Reese

207k20 gold badges283 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Drew Reese Over a year ago

@user10355996 Then you should tailor your question to be more specific to your actual scenario. Simple questions get simple answers. Feel free to update your question following these guidelines: how to ask and how to create a Minimal, Complete, and Reproducible Example. Please include the two components you allude to, relevant redux code, and specific details about your use-case and expected result.

Drew Reese Over a year ago

@user10355996 FYI the above concept will still work, but instead of component state it'll be app state in redux store, and the two components need to connect to and update/read the same value from the store.

Drew Reese Over a year ago

@user10355996 Think of them as two separate entities. (1) Input gets value from store and dispatches action to update the store on onChange event, done. (2) Button dispatches action to update the store on onClick event, done. If you update your question with tangible code I (and the community at-large) can provide better assistance.

Collectives™ on Stack Overflow

React: How to update an input box text when click a button?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related