Question 244512 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to uplift values to siblings in React js

I am trying to print addition of two number using React JS

function App() {
  return (
    <div>
      <InputNumbers />
      <PrintAddition />
    </div>
  );
}

App Contains two components PrintAddition & InputNumbers, Where InputNumbers components take values from inputs and that data has to be sent to it sibiling component PrintAddition, How ?

function PrintAddition() {
  return (
    <div>
      <p>
        The addition of numbers is <span>{Here result has to be printed }</span>
      </p>
    </div>
  );
}

function InputNumbers() {
  const [num1, setnum1] = useState(0);
  const [num2, setnum2] = useState(0);

  return (
    <div>
      <input
        className="num1"
        type={"text"}
        onChange={(e) => setnum1(e.target.value)}
      ></input>
      <input
        className="num2"
        type={"text"}
        onChange={(e) => setnum2(e.target.value)}
      ></input>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    You need to move state to the App component and use props to pass them into specific components.

    function App() {
  const [num1, setnum1] = useState(0);
  const [num2, setnum2] = useState(0);
  return (
    <div>
      <InputNumbers setnum1={setnum1} setnum2={setnum2} />
      <PrintAddition num1={num1} num2={num2} />
   </div>
  );
}
    Login or Signup to reply.
  2. 0

    There are many ways of doing this. One of the easiest is to let App hold the state and send it to PrintAddition.

    You’ll need to send the setter funciton to InputNumbers so they can call it in the onChange.

    Another option would be to use something like React Redux to save that data in a Store.

    Demo based on OP"s code:

    const { useState } = React;

const Example = () => {

    const [input, setInput] = useState([]);
    
    const setter = (index, value) => {
        setInput(p => {
            let n = [ ...p ]
            n[index] = value;
            return n;
        });
    }
    
    return (
        <div>
            <InputNumbers setter={setter} />
            <PrintAddition sum={input.reduce((a, b) => a + b, 0)} />
        </div>
    );
}

function PrintAddition({ sum }) {
    return (<p>The addition of numbers is <span>{sum}</span></p>);
}

function InputNumbers({ setter }) {
    return (
        <div>
            <input className="num1" type={"text"} onChange={(e) => setter(0, +e.target.value)}></input>
            <input className="num2" type={"text"} onChange={(e) => setter(1, +e.target.value)}></input>
        </div>
    );
}
ReactDOM.render(<Example />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search