How to send info from a reusable input to the other components in React

user_13861133 0
Viewed 379

I have different forms in different components. And one input, which I reuse in these components. If the user write smth in one component, another components should show this text too. And I don't know how to send this info to other components.

const InputComponent = () => {
  const [isInput, setisInput] = useState("");
  const changeInput = (event: ChangeEvent<HTMLInputElement>) => {
    setIsInput(event.target.value);
  };
  return <input type="text" value="isInput" onChange={changeInput} />;
};

And after it I need to reflect the inputed text in the other components.

const AnotherComponent = () => {
  return (
    <>
      <InputComponent />
      <button>send</button>
    </>
  );
};
react-props reactjs input
2 Answers

You have 2 main options:

  1. Define useState in AnotherComponent and send a setisInput as a parameter to InputComponent
  2. Use global store e.g. useContext or useSelector (if you are using redux). Then you can access this data everywhere in your application.
user_19613780

I think a great way is to pass a callback handler as a property.

class AnotherComponent extends Component {
    constructor(props){
        super(props);
        this.updateView = this.updateView.bind(this);
    }
    
    updateView(someValue){
         // Do something with someValue
    }
    
    render(){
         return(
             <>
                 <InputComponent updateView={this.updateView} />
                 <button>send</button>
             </>
        );
    }
}

const InputComponent = (props) => {
   const [isInput, setisInput] = useState("");
   const changeInput = (event: ChangeEvent<HTMLInputElement>) => {
       setIsInput(event.target.value);
       
       // This line here
       this.props.updateView(event.target.value);
   };
   return <input type="text" value="isInput" onChange={changeInput} />;
};

That should work. I didn't change your setIsInput() but I do not think you need that.

You can look at the documentation here and also this might help.

user_15607080
Related