CODEWITHSUNDEEP
reactjs
Kris Jones
Kris Jones

Reputation: 635

Pass index to parent component function?

I'm trying to select a link and open a popup that has more information related to the link. I can't figure out how to get "I" back up to the parent to change setState. I have the popup working with handleClick. I removed the irrelevant code. My last resort was creating a global selectedNoteIndex and setting that somewhere in the click action, but I don't think that's a good idea, would rather get rid of the global variable. I want to make handleClick make notes[i] with i coming from the LinkContainer.

//App.js
let selectedNoteIndex = null;

const notes = [
{
title: "meeting 1",
teams: ["support"]
},
{
title: "meeting 2",
teams: ["marketing", "development"]
},
];

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
  selectedNote: '',
};
}
handleClick = () => {
this.setState(
  { selectedNote: notes[selectedNoteIndex] },
  () => {
    console.log(this.state);
  }
);
};

render() {
return (
  {notes.map((object, i) => (
    <LinkContainer
      obj={object}
      key={i}
      title={notes[i]["title"]}
      teams={notes[i]["teams"]}
      onClick={this.handleClick}
    />
  ))}
);
}
}

//LinkContainer.js
const LinkContainer = (props) => {
  return (
    <div onClick={props.onClick} className="link-container">
      <div">{props.title}</div>
    </div>
  );
};

Upvotes: 0

Views: 387

Answers (1)

kaveh
kaveh

Reputation: 2146

Change handleClick so it accepts the index as an argument, handleClick(index) => ... and then pass the index in onClick prop: onClick={() => this.handleClick(i)}.

Upvotes: 1

Related Questions