React onClick pass object ID from a JSON array

Question

I'm very new to React and coding in general. I have a project where I need to be able to click on a movie poster and have it open a new page where it would show details on the movie.

Below is the JSON

[
    {
        "id": 1,
        "name": "The Matrix",
        "image": "/assets/images/posters/the_matrix.jpg"
    },
    {
        "id": 2,
        "name": "Jaws",
        "image": "/assets/images/posters/jaws.jpg"
    },
    {
        "id": 3,
        "name": "Jurassic Park",
        "image": "/assets/images/posters/jurassic_park.jpg"
    }
 ]

Below is the component that I'm passing the individual movies through

class LibraryCard extends Component {

  render () {
    return (
      <div>
        <div className="container">
          <div className="row">
              {films.map((props) => {
                // Returns film poster and title
                return <div onClick={() => props.handleUpdateFilm(props.id)}>
                    <a onClick={() => {window.location.href="filmdetails/" + props.name;}}><img src={props.image} alt={props.name} key={props.id}></img></a>
                    <h6>{props.name}</h6>
                  </div>
              })}
          </div>
        </div>
      </div>
    );
  }
}

The card is being passed into the Films page which displays all the posters for the film

const Films = () => (
        <div>    
            <LibraryCard />
        </div>
);

export default Films;

Below is the Details page that will display all the info for each film that's clicked.

class Details extends Component {
  render() {
    return (
      <div><h1 align="center">This is a story...</h1>
        <div className="container">
            <div className="row">
              {Films.map(Film => <img src={Film.image} key={Film.id} id={Film.id} alt={Film.name} handleClick={this.handleClick} />)}
            </div>
        </div>
      </div>
    );
  }
}

Pardon the inefficiency of the code. Again, I'm new to this. I just need help getting it to load to a new page for each movie. Any help would be appreciated.

Treycos · Accepted Answer · 2019-02-20 20:10:28Z

2

What you are looking for here is a curried function :

handleUpdateFilm = id => ev => {
    //Do whatever you want with the id variable here
}

This function will accepts 2 sets of parameters, the first time it is called, only the id will be set, the second time, the event will be given and the instructions in it will be executed.

Here is how you can use and bind it in your code :

class LibraryCard extends Component {

    handleUpdateFilm = id => ev => {
        //Do whatever you want with the id variable here
    }

    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        {films.map(({ id, name, image }) => // Props deconstruction
                            <div onClick={this.handleUpdateFilm(id)}> //Your function binding
                                <a onClick={() => { window.location.href = "filmdetails/" + name; }}>
                                    <img src={image} alt={name} key={id}></img>
                                </a>
                                <h6>{name}</h6>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        );
    }
}

I also removed the variable named props in your code, if something is not a prop, try to avoid naming it props.

answered Feb 20, 2019 at 20:10

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gilagan Over a year ago

Thanks for the tip! :)

Collectives™ on Stack Overflow

React onClick pass object ID from a JSON array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related