Как поменять местами данные у компонентов React?

Question

[Daniil]

Доброй ночи. Прошу помощи. Подскажите на примере, если возможно, как поменять данные у компонентов.
Например, есть 2 инпута. Город откуда и город куда. В каждом инпуте есть свой value, например у Откуда "Москва", а у куда "Питер". И есть родитель где эти оба компонента существуют.

Как можно поменять данные у данных компонетов местами?

Answer 1

[0xD34F]

const Input = ({ label, ...props }) => (
  <div>
    <label>
      {label}
      <input {...props} />
    </label>
  </div>
);

class App extends React.Component {
  state = {
    from: 'Москва',
    to: 'Питер',
  }

  onChange = ({ target: { value, name } }) => {
    this.setState(() => ({
      [name]: value,
    }));
  }

  swap = () => {
    this.setState(({ from, to }) => ({
      from: to,
      to: from,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.swap}>swap</button>
        <Input label="откуда" value={this.state.from} name="from" onChange={this.onChange} />
        <Input label="куда" value={this.state.to} name="to" onChange={this.onChange} />
      </div>
    );
  }
}

Comments

[Daniil]

Спасибо большое, ознакомлюсь