CODEWITHSUNDEEP
javascriptreactjslistrendering
M.A.G
M.A.G

Reputation: 549

How to make items in list clickable in ReactJS

What i want to do is make the items of the list clickable so that once i click on one of them it redirects me to another component for example if i am in /Answers i want to be redirected to /Answers/idOfitemClicked. How can i do that?

Here is the code of my render method:

render() {
    const quesItems = this.state.questions.map((question, i) => {
      return (
        <li key={this.props.account.id === question.expID}>{question.description}
          {question.senderID}</li>
      );
    });
    return (
      <div>
        <h1> Answer the questions here!</h1>
        <ul>
          {quesItems}
        </ul>
      </div>
    );
  }

Upvotes: 1

Views: 1057

Answers (2)

DJN
DJN

Reputation: 41

In your HTML, try having an href=/Answer/idOfItemClick in the item you are trying to make "clickable". In this case <ul>

Upvotes: 2

madox2
madox2

Reputation: 51841

Simply use html link element with href:

const quesItems = this.state.questions.map((question, i) => {
  return (
    <li key={this.props.account.id === question.expID}>
      <a href={'/Answer/' + question.id}>
        {question.description} {question.senderID}
      </a>
    </li>
  );
});

Upvotes: 1

Related Questions