Как обновить одно поле в соответствии с другим в реакции?

  <input
    placeholder = "eth"
    value = {eth}
    onChange = {(e) => {
      let eth_input = e.target.value;
      console.info(eth_input);
      setEth(eth_input)
      setToken(eth_input * rate);
    }}
  />
  <input
    placeholder = "token"
    value = {token}
    onChange = {(e) => {
      let token_input = e.target.value;
      console.info(token_input);
      setToken(token_input)
      setEth(token_input / rate);
    }}
  />

Проблема с вашим кодом заключается в том, что ваши два входа оба, по крайней мере, для начала, неконтролируемые входы. И когда я запускаю ваши исходные коды и ящик, появляется консольное сообщение, предупреждающее об этом, когда вы редактируете любое из полей.

Это происходит из-за того, что, хотя ваши входные данные получали свое значение из состояния, их обработчики изменений не обновляли то же самое состояние входным значением. Вы обновляли состояние входа Другие, но не их самих.

Добавление двух выделенных строк ниже, по одной в каждом обработчике событий, исправляет это и, насколько я могу судить, заставляет все работать так, как вы предполагали:

import "./styles.css";
import React from "react";

export default function App() {
  const rate = 100;
  const [token, setToken] = React.useState();
  const [eth, setEth] = React.useState();

  console.info("token", token);
  console.info("eth", eth);

  return (
    <div className = "App">
      <h1>1 eth = 100 token</h1>
      <h2>goal: change one input, the other updates automatically</h2>
      <input
        placeholder = "eth"
        value = {eth}
        onChange = {(e) => {
          let eth_input = e.target.value;
          console.info(eth_input);
          setEth(eth_input); // <-- add this
          setToken(eth_input * rate);
        }}
      />
      <input
        placeholder = "token"
        value = {token}
        onChange = {(e) => {
          let token_input = e.target.value;
          console.info(token_input);
          setToken(token_input); // <-- and this
          setEth(token_input / rate);
        }}
      />
    </div>
  ):
}