Problem :
I need to change two components based on an onclick event. The function displayed on the onclick event handleChange has a prop 'text' . I need to change the value of the prop 3 times whenever I run the onclick event.
1.
I have a chip component(first component) which I want to change its text and color whenever my button(second component) it's clicked; the button will change its text as well. So I did with conditional rendering and my onclick event in my button.
The thing here is that I have 3 states in which I want to change my chip and button, but only can make it with two :
-default value which I apply when creating the state const with useState:
const [change, setChange] = useState("Pending");
-the value I pass to the event in the button:
<Button variant="contained" onClick={() => handleChange("hello")}>
2.
Besides the first button I have another button which I want to hide whenever my third state of chip changes.
I have 3 states : hello,pending,cancel.
When first button and chip change to cancel I want to hide my third button.
I tried to make a switch statement to solve the problem of the 3 states but I don't know how to use it. I don't know how to pass the 3 values(hello,pending,cancel.) inside the button either.
Note: I am new in code sandbox so please tell me is you see the changes bcs I don't manage well enough the platform
Assuming your three states are in order
const state = ["pending", "hello", "cancel"];
const [change, setChange] = useState(0);
function handleChange() {
setChange(prevState => prevState === 2 ? 0 : prevState + 1);
}
const style = [
{color: 'secondary'},
{color: 'primary'},
{style: {backgroundColor:"#7ed6df"}}
];
return (
<>
<Chip label={state[change]} {...style[change]} />
<Button variant="contained" onClick={handleChange}>
{state[change]}
</Button>
{change !== 2 && <Button variant="contained">Disappear</Button>}
</>
);