Почему возникает ошибка при использовании useState?

Question

[zerabora]

Суть задачи: добавить текст из инпута в абзац по нажатию на кнопку.

import React, {useState} from 'react'

const Task = () => {
    const [value, setValue] = useState();

    const handleChange = (e) => {
        setValue(()=>({value: e.target.value}));
    };

    const handleClick = () => {
        return value;
    };

    return <div>
        <input type='text' onChange = {handleChange} />
        <input type='submit' value ='click' onClick = {handleClick} />
        <p>{handleClick()}</p>
    </div>
};

export default Task;

Текст из инпута в абзац передаю:
<p>{handleClick()}</p>

При этом появляется ошибка на стадии onChange инпута:

Uncaught Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

Как исправить проблему, используя функциональный компонент и хуки?

Answer 1

[Тигран Абрамян]

const [value, setValue] = useState('');
const [text, setText] = useState('');

const handleChange = (e) => setValue(e.target.value);
const handleClick = () => setText(value);

<p>{text}</p>