adding to an array using useState using the input value - React

Question

I'm really close to achieving the final goal. My goal is to add X and the name of X is the input's value. I just want a little help that why the function isn't working(I'm sure the method is true). I would appreciate it if you explain it so I can find it myself.

Function:

const [activityNames, setName] = useState([
    { id: 1, name: 'Feel free to add, edit and delete!' }
]);
const handleSetName = e => {
    const name = {
        id: Math.random() * 10000,
        name: e.target.value
    };
    let names = activityNames.concat(name)
    setName(names);
};

Input:

<input type="text" placeholder="Aktivitätsname" value={activityNames.name} />
<button onClick={handleSetName}>
    <i className="fas fa-plus"></i>
</button>

CertainPerformance · Accepted Answer · 2021-09-10 20:34:00Z

You need to both set the value of the input field properly, and retrieve it properly.

In order to set the value of an input, you also need to have a change listener - put the current value of the input into state, and then use that state value inside handleSetName instead of e.target.value. (The target inside handleSetName is the button, which has no value)

const App = () => {
    const [value, setValue] = React.useState('');
    const [activityNames, setName] = React.useState([
        { id: 1, name: 'Feel free to add, edit and delete!' }
    ]);
    const handleSetName = e => {
        const name = {
            id: Math.random() * 10000,
            name: value
        };
        let names = activityNames.concat(name)
        setName(names);
    };
    return (<div>
        <input placeholder="Aktivitätsname" value={value} onChange={e => setValue(e.target.value)} />
        <button onClick={handleSetName}>
            <i className="fas fa-plus"></i>
        </button>
        {JSON.stringify(activityNames)}
    </div>);
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Collectives™ on Stack Overflow

adding to an array using useState using the input value - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related