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

Reactjs – Getting previous state in console.log using useState

when I do console.log in home.js, it shows me the previous second state of the selectSprint. can you explain me what is the problem with the useState hook ?
I have two components in different files, one is home.js and another is iteration.js. In home.js, the code is like written below:

`

---------
export default function DataTable(){
const [selectSprint, setSelectSprint] =useState("none")
useEffect(()=>{
  console.log(selectSprint)})
return (
       <>
             <Interation    setSelectSprint = {setSelectSprint}/>
      </>
)
}

in Iteration.js
`

  export default function Iteration(props){
        const handleChange= (event)={
              props.setSelectSprint(sprint[value-1]
         }
         return (
               <Select value={value} onChange={handleChange}>
                      <MenuItem value={0}>
                              2023
                    </MenuItem>  
                       <MenuItem value={1}>
                             2024
                    </MenuItem>  
                      <MenuItem value={2}>
                              2025
                    </MenuItem>  
                       <MenuItem value={3}>
                          2026
                    </MenuItem>                 
              </Select>
         )
    }`

Example like: we just take a case. means I have clicked
2024 it shows undefined.
for 2025, it shows 2023.
for 2023, it shows 2024.
for 2025, it shows 2025.
it takes the previous second value.

`

useEffect(() => {
         console.log("Current state:", selectSprint);
     }, [selectSprint]);`

Have tried this, but problem is same.

Tags:

2

Answers


  1. 0

    Please change the sprint[value-1] to sprint[value] that is causing the previous value to be taken.

    import { useState } from 'react';

export default function Iteration(props: any) {
  const [value, setValue] = useState(0);
  const sprint = ['2023', '2024', '2025', '2026'];
  const handleChange: any = (event) => {
    const value = event && event.target && event.target.value;
    setValue(value);
    console.log(value);
    props.setSelectSprint(sprint[value]);
  };
  return (
    <select value={value} onChange={handleChange}>
      <option value={0}>2023</option>
      <option value={1}>2024</option>
      <option value={2}>2025</option>
      <option value={3}>2026</option>
    </select>
  );
}

    stackblitz

    Login or Signup to reply.
  2. 0 
    Try this :
export default function DataTable() {
      const [selectSprint, setSelectSprint] = useState("none");
    
      useEffect(() => {
        console.log(selectSprint);
      }, [selectSprint]);
    
      return (
        <>
          <Iteration setSelectSprint={setSelectSprint} />
        </>
      );
    }

    and

     export default function Iteration(props) {
      const handleChange = (event) => {
        props.setSelectSprint((prevSprint) => {
        
          const value = event.target.value;
         
          return sprint[value - 1]; 
        });
      };
    
      return (
        <Select onChange={handleChange}>
          <MenuItem value={0}>2023</MenuItem>
          <MenuItem value={1}>2024</MenuItem>
          <MenuItem value={2}>2025</MenuItem>
          <MenuItem value={3}>2026</MenuItem>
        </Select>
      );
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search