Updating the state to the current target.value of a click

Question

I'm having some trouble here on a simple dropdown select from MaterialUI/React that although I am able to update the label for the item I am clicking on, the state is still stuck on the previous value. Open the console terminal to see what I mean.

This will/can create issues when I want another set of options to open depeding on the state selected. For example, if I click on "Blues & Jazz", I should be able to get a set of options that correspond to subgenres of "Blues & Jazz), Not subgenres of whatever else was clicked before.

P.S. For brevity, I didn't add the submenus options. I can probably handle that if I can get the state to update onclick

import React, { useState } from "react";
import { Box, FormControl, MenuItem, Select } from "@mui/material";

export const wbrselectors = {
  sections: ["Rock", "Soul", "Hip Hop & R&B", "Blues & Jazz", "Classical"]
};

export default function App() {
  const [sectionone, setSectionOne] = useState("Rock");

  const onSectionOneSelectChange = ({ target }) => {
    const value = target.value;

    setSectionOne(value);

    console.log("value:", value, ", sectionone:", sectionone);
  };

  return (
    <Box>
      <FormControl fullWidth size="small">
        <Select
          component="dropdown"
          value={sectionone}
          name="sections"
          defaultValue=""
          onChange={onSectionOneSelectChange}
        >
          {wbrselectors.sections.map((item, index) => (
            <MenuItem key={index} value={item}>
              {item}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

Here's a link in sandbox. Thanks in advanced

Your `console.log` won't show the new value (setting state is asynchronous, and `sectionone` won't have changed yet), but this looks like showing any additional `select` components based on that state should work. — DBS, Sep 01 '23 at 14:31
Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — Wing, Sep 01 '23 at 14:46
https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately — epascarello, Sep 01 '23 at 14:49

score 0 · Answer 1 · answered Sep 01 '23 at 14:36

0

Setting state is async. You need to use another hook to react upon the changes on state:

  useEffect(() => {
    console.log("sectionone:", sectionone);
  }, [sectionone]);

Here, the function we provide to useEffect hook will run when sectionone changes.

answered Sep 01 '23 at 14:36

starikcetin

1,391
1
16
24

But this is jsut a console log. I can't put the onclick event fucntion in here because it reads from the event.target.value, which I would have to inject here. I only want to update my state onclick. – LOTUSMS Sep 01 '23 at 14:47
@LOTUSMS I don't quite understand your comment. You'll keep the `onclick` callback, and add `useEffect` separately. You are not going to put the `onclick` callback in `useEffect`. – starikcetin Sep 01 '23 at 14:51
I updated the sandbox with the subgenres to visualize it better – LOTUSMS Sep 01 '23 at 15:07
The function callback for updating the value on a click event contains event.target.value as an argument that needs to be passed into the callback. I cant do that inside the useEffect. I dont have visibility from useEfect into one specific click event. And I will have several – LOTUSMS Sep 01 '23 at 15:12
@LOTUSMS The quick and dirty solution is just to use `value` instead of `sectionone` in your `data.find()` – DBS Sep 01 '23 at 15:14
@DBS THAT DID IT!!!! Thank you! Post an actual answer so I can credit you – LOTUSMS Sep 01 '23 at 15:17

score 0 · Answer 2 · answered Sep 01 '23 at 14:44

0

This is actually working as expected, the state update is async in nature, and React might batch multiple setState() updates for better performance.

answered Sep 01 '23 at 14:44

sjsouvik

113
1
8

Updating the state to the current target.value of a click

2 Answers2