type error = assignment to constant variable react.js

Question

    import React, { useState } from 'react'

export default function App() {
  const [todos , set_todos] = useState([''])
  const [input , set_input] = useState('')
  const new_todo = (event) =>{
    set_todos = ([...todos,input]);
  }
  return (
    <>
      <h1>hello world</h1>
      let input = <input value={input} onChange={event=> set_input(event.target.value)}/>
      
      <button onClick ={new_todo}>add todo</button>
      <ul>
        {todos.map(todo =>(
          <li>{todo}</li>
        ))}
      </ul>
      
    </>
  )
}

the error is in 7th line of the code

i am a totally new beginner so it would be helpful if you explain it to me

You are trying to override the const value, that is causing the issue — Sarun UK
– Sarun UK, Commented Jun 15, 2021 at 9:33
remove equal operator on line 7 => set_todos([...todos,input]); — Khawar Qureshi
– Khawar Qureshi, Commented Jun 15, 2021 at 9:39

reza makhdomi · Accepted Answer · 2021-06-15 14:05:43Z

If you want to update your state (that is an array) in react hooks, you should try like this :

  const new_todo = (input) => set_todos(oldState => [...oldState,input])

with this code, you will not see any error but I have some offer for your code that make it better:

put your inputs such as input and buttons in the form tag
use variable declarations outside of return ( let return be for HTML tag and its better to use your logics outside of return ) make it easier to read

and I think your code can be like this:

import React, { useState } from 'react'

export default function App() {
  const [todos , set_todos] = useState([''])
  const submitTask = (e) =>{

    // Calling preventDefault() during any stage of event flow cancels the event,
    // meaning that any default action normally taken by the implementation
    // as a result of the event will not occur
    e.preventDefault(); 

    const { taskInput } = e.target; // get your input by name

    // assign input value to your state
    set_todos(oldState => [...oldState, taskInput.value ]) 
  }
  return (
    <>
      <h1>hello world</h1>
      <form onSubmit={submitTask}>
        <input name="taskInput" />
        <button type="submit">add todo</button>
      </form>

      <ul>
        {todos.map(todo =>(
          <li>{todo}</li>
        ))}
      </ul>

    </>
  )
}

Skyyye · Accepted Answer · 2021-06-15 09:38:21Z

0

You should use set_todos like below:

set_todos([...todos, input]);

Because set_todos is a function. You can find the State Hook's usage in Introducing Hooks.

answered Jun 15, 2021 at 9:38

Skyyye

114 bronze badges

Collectives™ on Stack Overflow

type error = assignment to constant variable react.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related