Как создавать новую ячейку при заполнении инпута (вводе данных) и нажатии на кнопку?

Question

[mosikus]

Здравствуйте. Допустим, у меня есть объект

const test = [
  { id: "1", name: "name1" },
  { id: "2", name: "name2" },
  { id: "3", name: "name3" },
  { id: "4", name: "name4" },
  { id: "5", name: "name5" },
  { id: "6", name: "name6" },
  { id: "7", name: "name7" },
  { id: "8", name: "name8" },
  { id: "9", name: "name9" }
];

и я его вывожу

class App extends React.Component {
  state = {
    search: ""
  };

  get test() {
    return test;
  }

  render() {
    return (
      <div>
        <div>
          {this.test.map((kef, i, a) => (
            <div>
              <div>name: {kef.name}</div>
              <div>id: {kef.id}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

https://codesandbox.io/s/sharp-bartik-d6jju?file=/...
Ну, это не важно. У меня вопрос немного о другом, это просто пример. Я без бека, но как то потестить, посмотреть хотелось бы. Допустим, есть у меня в приложении 2-3 инпута, пользователь их заполняет и нажимает кнопку "создать". И на одной из панелей появляется ячейка с заполненными данными. Как такое можно реализовать? Думал просто на стейтах сделать, но это совсем бред. И поправьте, пожалуйста, название вопроса.

Answer 1

[0xD34F]

function App(props) {
  const [ items, setItems ] = React.useState([...props.items]);
  const [ name, setName ] = React.useState('');

  const add = () => setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      name,
    },
  ]);

  return (
    <div>
      <div>
        <input onChange={e => setName(e.target.value)} />
        <button onClick={add}>add</button>
      </div>
      {items.map(n => (
        <div key={n.id}>
          {Object.entries(n).map(([ k, v ]) => <div>{k}: {v}</div>)}
        </div>
      ))}
    </div>
  );
}

Comments

[mosikus]

https://codesandbox.io/s/jovial-stonebraker-dsunw?...

[0xD34F]

mosikus, introducing hooks:

Hooks are a new addition in React 16.8.

Answer 2

[Kirill Makarov]

С помощью спред оператора сеттишь, для того чтобы добавить на нужную позицию используй длину массивв