how to pass data from component to another component in React

Question

How to pass data between React components, for example I have two component the first one called 'ButtonComp' and the second is 'InputComp', ButtonComp have one button that change the background color and the InputComp have one input filed now I want to take the string form the InputCome component and send it to ButtonComp, so when the user type 'green' in the InputComp and click the button its change the color, what is the approach for this.

keep the data / state in the nearest parent, pass the data as props and keep handlers in it as well so you can pass the reference ... you can check [Lifting state / Sharing State Between Components](https://beta.reactjs.org/learn/sharing-state-between-components) — KcH, Sep 17 '22 at 06:48
https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs — ksav, Sep 17 '22 at 07:32

KcH · Answer 1 · 2022-09-17T07:26:10.647

similar to benjamins, slight different in passing props :)

const {useState} = React;

const App = () => {
    const [bg, setBg] = useState("");
    const [color, setColor] = useState("");
    
  
    return (
        <div style={{background: bg, height: "100vh"}}>
            <InputComp color={color} setColor={setColor}/>
            <br/>
            <br/>
            <ButtonComp color={color} setBg={setBg}/>
        </div>
    );
};

const ButtonComp = ({color, setBg}) => {
  return(<button onClick={()=> setBg(color)}>{color ? `Click to change BG to ${color}` : "Please Input & Click to change BG"}</button>)
}

const InputComp = ({setColor, color}) => {
  return(<input type="text" value={color} onChange={(e)=>setColor(e.target.value)} />)
}

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

I'm impressed that we both wrote the basically the same example code! — Benjamin, Sep 17 '22 at 07:20

score 0 · Accepted Answer · answered Sep 17 '22 at 07:08

In order to share "state" between components, you need to "lift state up". This means creating state in a component that is rendered higher in the component tree, than the components that need to share that state.

In the example below. State is held in the App component, and is passed down to the InputComp component, and shared into the click handler for ButtonComp component.

When ButtonComp is clicked, the input state is copied to the background state, which is then rendered into the css on the div component.

This is a very basic example, but demonstrates how to accomplish your goal.

const InputComp = (props) => {
  return <input {...props} />;
};

const ButtonComp = (props) => {
  return <button {...props} />;
};

const App = (props) => {
  const [background, setBackground] = React.useState('')
  const [input, setInput] = React.useState('')

  return (
    <div style={{ background: background }}>
      <div>
        <InputComp value={input} onChange={(e) => setInput(e.target.value)} />
      </div>
      <div>
        <ButtonComp onClick={() => setBackground(input)}>Submit</ButtonComp>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

<div id="root" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

This looks perfect than mine lol :) .. Thanks for the explanation Ben ! cheers — KcH, Sep 17 '22 at 07:18

how to pass data from component to another component in React

2 Answers2