Как отрисовать элемент используя данные из объекта?

Question

[Алексей Милютин]

Пишу todo приложение, сначала реализовывал простой механизм туду листа с записью текста в массив. Однако сейчас я решил расширить функционал и хочу, чтобы был массив объектов.

this.state = {
todoList: [{
key: 0,
text: '',
done: false
}]
}

Как переписать эти строки так, чтобы они создавали объект в массиве с текстом из инпута?

handleSubmit = (e) => {
    if (e.keyCode === 13 && e.target.value !== '') {
      console.log('success');
      const { value } = e.target;
      this.setState(prevState => ({
        todoValue: [...prevState.todoValue, value]
      }));
      e.target.value = '';
    }
  }

Привожу весь код:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoValue: []
    };
  }
  render() {
    return (
      <div className="body-container">
        <h1>To Do List</h1>
        <input placeholder="Введите заметку" type="text" onKeyDown={this.handleSubmit}/>
        <input type="button" value="Очистить список" className="resetBtn" onClick={this.handleReset}/>
        <AlertSelect />
        <hr />
        <ul>
          {this.state.todoValue.map((text, index) => (
            <Li click={this.handleClick} key={index} text={text}/>
          ))}
        </ul>
      </div>
    )
  }

  handleReset = () => {
    this.setState({
      todoValue: []
    })
  }

  handleSubmit = (e) => {
    if (e.keyCode === 13 && e.target.value !== '') {
      console.log('success');
      const { value } = e.target;
      this.setState(prevState => ({
        todoValue: [...prevState.todoValue, value]
      }));
      e.target.value = '';
    }
  }
}

Answer 1

[Антон Спирин]

this.setState(state => ({
  todoList: [...state.todoList, { id: nanoid(8), text: value, done: false }],
}));

для генерации id используется nanoid

{this.state.todoList.map(todo => (
  <Todo click={this.handleClick} key={todo.id} todo={todo} />
))}

Comments

[Алексей Милютин]

А каким образом переписать эти строчки, не получается понять, может тут уже метод map не подходит?

{this.state.todoValue.text.map((text) => (
            <Li click={this.handleClick} key={} text={text}/>
          ))}

[Антон Спирин]

Алексей Милютин, дополнил ответ, но вам надо написать компонент для вашей задачи.

[Владимир Проскурин]

для генерации используется nanoid

Для простой генерации uniqid использую такой небольшой интересный код
Math.random().toString(36).slice(2)
Конечно, у него куча недостатков, но для простых вещей отлично подходит.

[Антон Спирин]

Владимир Проскурин, о спасибо. Интересный способ. Почитал, что если Math.random() вернет 0.5, то вернет i, поэтому на всякий лучше так:

function randomString() {
  const s = Math.random().toString(36).slice(2);

  return s.length === 16 ? s : randomString();
}

[Владимир Проскурин]

Антон Спирин, интересно, с какой вероятностью Math.random может вернуть N-десятое число. Я прогнал такой код

for (var i = 0; i < 1000000000; i++) {
    let ran = Math.random();
    console.assert([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1].indexOf(ran) === -1, ran);
}

но не получил совпадений. А так да, длинна строки получается разной.

var dict = {};
for (let i = 0; i < 1000000000; i++) {
    let len = Math.random().toString(36).slice(2).length;
    dict[len] = (dict[len] || 0) + 1;
}
JSON.stringify(dict, null, '\t');
{
	"5": 3,
	"6": 162,
	"7": 5673,
	"8": 202507,
	"9": 7309413,
	"10": 263093415,
	"11": 704933631,
	"12": 23813467,
	"13": 622887,
	"14": 18306,
	"15": 517,
	"16": 19
}