Как правильно передать значение value из одной панели в другую?

Question

[mosikus]

Есть у меня app.js, в котором находятся две панели.
На одной этот код(лишнее убрал):

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>
  );
}

Его, соответственно, экспортирую в app.js. При нажатии на кнопку цифра выводится в input. В диапазоне [200,715] и тд выводится текст.
На второй панели хочу сделать так, чтобы при определенном значении value выводился определенный блок, но это значение нужно передать туда.
Я так понимаю, мне нужно занести value в стейт в app.js и потом передавать на вторую панель. Как это сделать ?

Answer 1

[0xD34F]

Переносите value из Home в родительский компонент, передаёте value и setValue в Home в качестве props. И во второй компонент тоже value передаёте. Ну и всё.

Comments

[mosikus]

Не понимаю как это

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

записать в app.js

[0xD34F]

Это в Home оставьте. Ясно же вроде сказал - setValue наверх унесите.

[mosikus]

Записал value в стейт в app.js, передал в Home, везде проставил props.value, а с

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

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

у меня уже проблема. Я не понимаю как это передать, чтобы оно работало, как в Home и в App записать

[0xD34F]

Мне что, в третий раз повторить? - setValue тоже должен браться из props. Кончайте уже тупить, ё-моё.

[mosikus]

Я пытался так сделать. При нажатии на кнопку ошибку выбивает

[0xD34F]

Всё с вами ясно. Может, ну его, этот реакт? - ничего же не получается.

Добавил в ответ ссылку на демо. Смотрите, думайте.

[mosikus]

Я так и не понял, увы, но пока будет в таком виде, видимо.

setValue1 () {
    this.setState({ value: (this.state.value + 1).slice(0, 3) })
  } 
  
setValue2 () {
    this.setState({ value: (this.state.value + 2).slice(0, 3) })
  }   

setValue3 () {
    this.setState({ value: (this.state.value + 3).slice(0, 3) })
  }

setValue4 () {
    this.setState({ value: (this.state.value + 4).slice(0, 3) })
  } 

setValue5 () {
    this.setState({ value: (this.state.value + 5).slice(0, 3) })
  } 

setValue6 () {
    this.setState({ value: (this.state.value + 6).slice(0, 3) })
  } 

setValue7 () {
    this.setState({ value: (this.state.value + 7).slice(0, 3) })
  } 

setValue8 () {
    this.setState({ value: (this.state.value + 8).slice(0, 3) })
  } 

setValue9 () {
    this.setState({ value: (this.state.value + 9).slice(0, 3) })
  } 

setValue0 () {
    this.setState({ value: (this.state.value + 0).slice(0, 3) })
  }   
  
reset () {
    this.setState({ value: '' })
}

[0xD34F]

Ну и зачем эта мерзость? Была же уже нормальная функция, для всех значений сразу.

[mosikus]

Теперь точно, думаю, хорошо.

addNumber = number => {
    return () => {
    this.setState({ value: (this.state.value + (number)).slice(0, 3) })
  };
  };