How to properly pass the value value from one panel to another?

Question

React

I have app.js, which contains two panels.
On one this code (excess removed):

const messages = [
  {
    values: [ [200,715],[717,749],[764,776],[800,999] ],
    message: 'Выводится текст',
  },
]; 
 
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

const initialValue = "";

function Home() {
  const [value, setValue] = React.useState(initialValue);

  const addNumber = number => {
    return () => {
      setValue(prevValue => (prevValue + number).slice(0, 3));
    };
  };

  const reset = () => {
    setValue(initialValue);
  };

  return (
    <div>
  
  <div>
                  {messages
                     .filter(n => n.values.some(v => (
                      (v instanceof Array && v[0] <= value && value <= v[1]) ||
                        v === value
                       )))
                     .map(n => <div key>{n.message}</div>)
                  }
        </div>
  
      <div>
        <input value={value} />
      </div>
      <div>
        {numbers.map(number => (
          <button key={number} onClick={addNumber(number)}>
            {number}
          </button>
        ))}
      </div>
      <div>
        <button onClick={reset}>Clear</button>
      </div>
    </div>
  );
}

Accordingly, I export it to app.js. When you click on the button, the number is displayed in the input. In the range [200,715] and so on, text is displayed.
On the second panel, I want to make sure that a certain block is displayed at a certain value value, but this value needs to be passed there.
As I understand it, I need to put the value in the state in app.js and then pass it to the second panel. How to do it ?

Answer 1

Pass value from Home to parent component, pass value and setValue to Home as props. And you also pass value to the second component. Well, that's all .