how to pass data from component to another component in React-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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)}>Change color</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>