Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – setState is not a function- trying to setState with button id to use in useParams for page navigation

I am trying to update the state of a button once id has been clicked. This id is then stored in the state so that it can be passed as a params to navigate to the page that has the same id as the button clicked.

Unfortunately I keep on getting ‘TypeError: setSimulation is not a function’.

I also have a useContext state management that also returns this.

Simulator.json

[ { 'id': 1, 'name':'John', 'age':39, 'occupation':'Plumber'}, { 'id': 2, 'name':'Lisa', 'age':22, 'occupation':'Dentist'}, { 'id': 3, 'name':'Alex', 'age':54, 'occupation':'Typewriter'}, ]

This is where I am displaying the buttons.

SimulatorPage.js

        import SimulatorList from '../../Assets/JSON/SimulatorList.json'
        import { useState, useEffect} from 'react';
        import {NavLink, useNavigate } from 'react-router-dom';


        const SimulatorPage = () => {

        const [simulation, setSimulation]= useState({})
   
        // This is the function that navigates user to the specific page 
            const navigate = useNavigate()

            const navigateToSimulatorTable = (id) => {
            setSimulation(id)
            console.log(id);
            navigate(`/simulator-more-info/${id}`)
            }




           return (
                <div className='buttonBlock'>
                        {
                            SimulatorList.map((item, index) => {
                                const { id,name } = item
                                return (
                                    <>
                                        <button id={item.id} key={index} 
                                  
                                        onClick={()=>navigateToSimulatorTable(item.id)}
                                        >
                                            
                                                {item.id}
                                                {item.name}
                                          
                                        <button>
                    </div>
                    )}

                export default SimulatorPage
``

This is the second page that takes the id that has been clicked from the button as shows more information about each person

SimulatorInformation.js

`
import SimulatorList from '../../Assets/JSON/SimulatorList.json'
import {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom';


const SimulatorInformation = () => {
 
const [moreInfo, setMoreInfo] = useState({})

const {id} = useParams();

 useEffect(() => {
    fetch(`/simulator-more-info/${id}`)
          .then((res) => res.json())
      .then((data) => setMoreInfo(data));
   }, []);

 
    return (
        <div>
            <div className='renderTableDiv'>
                <table className='renderTable'>
                    
                    <tr className='tableInfo'>
                        <th>Name</th>
                        <th className='rightColumnSimulator'>{moreInfo.name}</th> 

                    </tr>
                    <tr className='tableInfo'>
                        <th>Age</th>
                       <th className='rightColumnSimulator'>{moreInfo.age}</th> 
                        
                    </tr>
                    <tr className='tableInfo'>
                        <th>Occupation</th>
                       <th className='rightColumnSimulator'>{moreInfo.occupation}</th> 
                        

                    </tr>
                </table>
            </div>

        </div>
    )
}

export default SimulatorInformation`

At the moment, I am able to go to the page with correct id, but unable to setSimulation state so that I can use it in the SimulatorInformation.js page. I also had a thought to lift the state, however I was recieving the same error.
Tags:

3

Answers


  1. 0

    You have assigned the simulation stat as an object but have assigned it as a string using setSimulation. Since you only need to have one id change the useState type to string

        const SimulatorPage = () => {

    const [simulation, setSimulation]= useState('')

    // This is the function that navigates user to the specific page 
        const navigate = useNavigate()

        const navigateToSimulatorTable = (id) => {
        setSimulation(id)
        console.log(id);
        navigate(`/simulator-more-info/${id}`)
        }
    Login or Signup to reply.
  2. 0

    const [simulation, setSimulation]= useState({})
    this is your code where you have initialized empty object at first but later you are trying to update it with id.

    const navigateToSimulatorTable = (id) => {
        setSimulation(id)
        console.log(id);
        navigate(`/simulator-more-info/${id}`)
        }

    i think this is not how it should be initalize it

    Login or Signup to reply.
  3. 0

    Do you even need to save it in a state, if you do the navigate straight up?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search