I have multiple onClick button and whenever I click 1 button all the same buttons triggers. Reactjs

All of my components are the same here's a sample.

 const [show, setShow] = useState(false);

  

    return (
        <Box align="center">
            <Box pb={2}>
                <Box align="left">
                    <h1>UI Elements</h1>
                </Box>
                <Card>
                    <CardContent>
                        <h2 align = 'Left'><FormatColorFillIcon/> Colors</h2>
                        <hr/>
                        <App/>
                    </CardContent>
                </Card>
                <IconButton onClick={()=> setShow(!show)} aria-label="Hello sir" align = "right">
                <CodeIcon/>
                </IconButton>
                { show ? 
                    <div><Paper className = {classes.paperColor}>
                            <SyntaxHighlighter classes = {classes.paperColor} language="javascript" style={docco} align = "left" style = {dracula}> 
                                {codeString}
                            </SyntaxHighlighter>
                        </Paper>
                    </div> : null}

I want to trigger the only button that i clicked. I'm sorry i'm new at react js



Read more here: https://stackoverflow.com/questions/66279132/i-have-multiple-onclick-button-and-whenever-i-click-1-button-all-the-same-button

Content Attribution

This content was originally published by Eugene Cabangon at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: