Q: Elements sharing state I am trying to write a junior project in JS, using React (nothing breath-taking, only to gain some experience). Hence- I'm kind of fresh... I am heading for that generic "notes app".
But fetching the notes from the server and rendering them (using @material-ui Card element) faced a problem: all notes shared state: clicking on one's "expand" icon causes all cards to expand (BUT only shows the data in the one clicked). Clicking again (on the one clicked before) closes all of them
This is my first time using the 'useState' hook, and @material-ui.
I have SOME experience with react, both class and stateless components. But haven't faced this before.
This is the Notes component, which renders as many Note elements as saved.
  parseNotes = (data) => {
    const toBeNotes = [];
    for (let key in data) {
      toBeNotes.push(data[key]);
    }
    const aux = toBeNotes.map((note, i) => {
      return (
        <Note key={i} {...note} />
      )
    })
    this.setState({ notes: aux });
  }

  render() {
    return (
      <div className="notes">{...this.state.notes}</div>
    )

}
And this is the code for the Note component:
const [open, setOpen] = useState(false);
  function openHandler() {
    setOpen(!open);
  }
  return (
    <Card raised className="note">
      <CardHeader
        title={props.title}
        subheader={`Due at: ${props.date}, at ${props.time}`}
      />
      <CardActions>
        <IconButton>
          <ExpandMoreIcon
            onClick={openHandler}
          />
        </IconButton>
      </CardActions>
      <Collapse in={open}>
        <CardContent>
         <h6>{props.body}</h6>
        </CardContent>
      </Collapse>
    </Card>
  )

Any help will be highly appreciated!

A: What happens if you change your Note to something like this:


export const Note = ({date, time, title, body}) => {
  const [open, setOpen] = useState(false);
  return (
    <Card raised className="note">
      <CardHeader
        title={title}
        subheader={`Due at: ${date}, at ${time}`}
      />
      <CardActions>
        <IconButton>
          <ExpandMoreIcon
            onClick={() => setOpen(!open)}
          />
        </IconButton>
      </CardActions>
      <Collapse in={open}>
        <CardContent>
         <h6>{body}</h6>
        </CardContent>
      </Collapse>
    </Card>
  )
};


(Sidebar: You might pass open into your ExpandMoreIcon so that you can change the icon to reflect your reflected action)
In this scenario, open should only be relevant to the Card you're working with, and would not/should not effect other Notes in your display. If you needed to handle opening/closing one at a time you'd have to pass a method down from a higher component that would track the open/close state of each, possibly based on it's index (Which, BTW, you should never use as your key. Just give each Note it's own unique identifier and use that as your key.)

A: Each component works independently of another component. So 2 Notes "open" state is different and internally bound to their note only. Thus, it will not affect the other notes. Reason of error must be different. You have to provide your complete code for these 2 files. 
Still, for confirmation, I have written a code in which I make a component ColoredButton which shows red color initially, and as I click on it, it toggles to black, again I click on it, it toggles to red and so on.. Then I use this component 10 times in my App Component(directly rendered in index.js) and notice that every ColoredComponent behaves independently of another component.
ColorButton.js
const ColoredButton = props => {
  const redHex = "#f00";
  const blackHex = "#000";
  const [color, setColor] = useState(redHex);
  return (
    <React.Fragment>
      <button
        onClick={event => {
          event.preventDefault();
          if (color === redHex) {
            setColor(blackHex);
          } else {
            setColor(redHex);
          }
        }}
        style={{ color: `${color}` }}
      >
        Toggle My Color
      </button>
    </React.Fragment>
  );
};

export default ColoredButton;

index.js
import React from "react";
import ReactDOM from "react-dom";

import ColoredButton from "./ColoredButton";

import "./styles.css";

function App() {
  let buttons10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return (
    <React.Fragment>
      {buttons10.map(buttonNo => (
        <ColoredButton key={buttonNo} />
      ))}
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can try this code on CodeSandbox.
If this sample code does not help you solve your problem, then please provide the complete code of those 2 files.
