How can I get element of value, when I click their button in MUI?

Rahil Ali 0
Viewed 25

I have a status in the dashboard and want to change its status. I need when I click it, the state will change its value.

My component

   <MenuItem>
              <Button
                fullWidth
                onClick={handleChangeStatus}
              >
                <Typography value={"pending"} sx={{ color: "#488C6E" }}>
                  pending
                </Typography>
              </Button>
            </MenuItem>

State and function

  const [changeStatus, setChangeStatus] = useState(data.status);
  const handleChangeStatus = (e) => {
    console.log(e.target);
    setChangeStatus(e.target.value);
  };

The main problem is that the console looks e.target. For example, if I click it, the console shows:

<p class="MuiTypography-root MuiTypography-body1 css-rzm8ko-MuiTypography-root" value="pending">pending</p>

but if I write e.target.value, it gives undefined

material-ui reactjs javascript
1 Answers

You cant use "value" prop in Typography. Please click here link to see which props you can use in Typography.

I didn't understand what you want to do. But you can try this:

<Typography sx={{ color: "#488C6E" }}>
  {pending}    
</Typography>
birolaygün0
Related