Как добавить два объекта в state?

Question

[Dmitriy]

ЗАДАНИЕ
Дан следующий стейт:

this.state = {
	hrefs: [
		{href: '1.html', text: 'ссылка 1'},
		{href: '2.html', text: 'ссылка 2'},
		{href: '3.html', text: 'ссылка 3'},
	]
};

Выведите на экран следующее:

<ul>
	<li><a href="1.html">ссылка 1</a></li>
	<li><a href="2.html">ссылка 2</a></li>
	<li><a href="3.html">ссылка 3</a></li>
</ul>

Сделайте 2 инпута и кнопку, по нажатию на которую в список добавится новый li, причем href возьмется из первого инпута, а текст ссылки - из второго.

МОЕ РЕШЕНИЕ( незнаю как реализовать добавление в стейт )

import React from 'react'

class Task3 extends React.Component {
    constructor() {
        super()
        this.state = {
            hrefs: [
                {href: '1.html', text: 'ссылка 1'},
                {href: '2.html', text: 'ссылка 2'},
                {href: '3.html', text: 'ссылка 3'},
            ],
            value1: '',
            value2: '',
        }
    }



    handleChange(field, event) {
        this.setState({ [field]: event.target.value });
    }

    addLink(event) {
        this.state.hrefs.push(this.state.value1)
        this.state.hrefs.push(this.state.value2)
        this.setState({ hrefs: this.state.hrefs })
        event.preventDefault()
    }

    

    render() {
        const s = this.state
        const list = s.hrefs.map(
            (item, index) => {
                return (
                    <li key={index}>
                        <a href={item.href}>{item.text}</a>
                    </li>
                )
            }
        )

        return (
            <div>
                <ul className="list">
                    {list}
                </ul>

                <form className="form form-s" onSubmit={this.addLink.bind(this)}>
                    <input name="href" onChange={this.handleChange.bind(this, "href")} />
                    <input name="text" onChange={this.handleChange.bind(this, "text")} />
                    <input type="submit" className="btn" value="Добавить" />
                </form>
            </div>
        )
    }
}

export default Task3

Answer 1

[0xD34F]

class App extends React.Component {
  state = {
    links: [],
    newLink: {
      href: '',
      text: '',
    },
  }

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

  addLink = e => {
    e.preventDefault();

    this.setState(({ links, newLink }) => ({
      links: [ ...links, newLink ],
      newLink: Object.fromEntries(Object.keys(newLink).map(n => [ n, '' ])),
    }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.links.map(n => (
            <li>
              <a href={n.href}>{n.text}</a>
            </li>
          ))}
        </ul>
        <form onSubmit={this.addLink}>
          {Object.entries(this.state.newLink).map(([ name, value ]) => (
            <div>
              {name}:
              <input name={name} value={value} onChange={this.onChange} />
            </div>
          ))}
          <input type="submit" value="Добавить" />
        </form>
      </div>
    );
  }
}