Использование метода map в React Hooks

Question

Я только выучил новый для себя хук useState и у меня есть проблема...
Сейчас полетят тухлые помидоры в экран но я поставил себе задачу и не могу ёё решить.
Суть: есть обычное поле input в которое пользователь должен вводить кокой либо текст и после нажатия на кнопку текст должен отобразится на экране ( типо todo list ).
Проблема: Я посмотрел пару видео о даном хуке но научился я только самого банального ( делать счетчик и все по сути )

На даном примере кода я начал разработку задуманого но незнаю как присобачить веденное с инпута в переменную состояния хука "state, input"

Я не знаю что делать но я не понимаю логики хука, просьба не писать чтобы я внимательно читал документацию так как уже читал ее по несколько раз

import React, { useState } from 'react'

function App() {

    const [state, setState] = useState([])
    const [input, setInput] = useState('')

    function handleClick() {
        setState([...state, input])
    }

    return (
        <div>
            <input value={input} onChange={setState} />
            <button className="btn" onClick={handleClick}>Touch</button>
            <div>
                {
                    state.map()
                }
            </div>
        </div>
    )
}

export default App

Answer 1

В инпуте в атрибуте onChange вызывается setState, но значение не передаётся. Должно быть setState(value). После вызова с передачечей value, значение будет храниться в переменной state. Соответственно при клике обработчиком должна быть callback-функция, которая возьмёт из переменной value значение (оно будет равно тому, что было введено в инпуте).

Пример:

import React, { useState } from 'react'

function App() {

    const [todos, setTodos] = useState([])
    const [input, setInput] = useState('')

    function clickHandler() {
        const value = input // input доступен отсюда
        // ... далее обращение к API или то что нужно
        // например, копируем туду, которые были и добавляем новую
        setTodos([...todos, value])
    }

    return (
        <div>
            <input onChange={setInput(this.value)} />
            <button className="btn" onClick={clickHandler}>Add todo</button>
            <div>
                {
                    todos.map(todo => (<><div>{todo}</div><br/></>))
                }
            </div>
        </div>
    )
}

export default App

Answer 2

метод state.map() пустой 2)setState у вас передает событие а не значение

import React, { useState } from 'react'; function App() { const [state, setState] = useState([]) const [input, setInput] = useState('')

     function handleClick() {
         setState([...state, input])
     }
     function handleInput(event){
         setInput(event.target.value);
     }

     return (
         <div>
             <input value={input} onChange={handleInput} />
             <button className="btn" onClick={handleClick}>Touch</button>
             <div>
                 {state.map(function(el){return <div>{el}</div>})}
             </div>
         </div>
     )
 }

 export default App

как то так надо

БЛОГ НА HUSL

Использование метода map в React Hooks

Ответы (2 шт):