React Components with propTypes from array of objects

Question

I have some problem with creating React Components with propTypes with an array of objects.

So I have this array of objects:

var movies = [
  {
    id: 1,
    title: "Harry Potter",
    desc: "Wizzard Movie",
    src:
      "https://ocdn.eu/pulscms-transforms/1/isDktkqTURBXy9kMmM4YmI4N2QzY2U0ZjI5NmIzNTU3Mjk2ZTg2ZWY2My5qcGVnkZMCAM0B5A"
  },
  {
    id: 2,
    title: "LK",
    desc: "Movie about Lion King",
    src: "https://1.fwcdn.pl/an/np/1985708/2016/5817_1.7.jpg"
  },
  {
    id: 3,
    title: "Pulp Fiction",
    desc: "xxx",
    src:
      "https://coubsecure-s.akamaihd.net/get/b44/p/coub/simple/cw_timeline_pic/2d2d519173e/5f0067e9d4849ef1dee4a/big_1518161198_image.jpg"
  },
  {
    id: 4,
    title: "Lethal Weapon 3",
    desc: "Movie about..",
    src: "https://media.teleman.pl/photos/lethal-weapon-3.jpg"
  }
];

What I want to do is: 1. create class to every component I want to create: - Movie Class that should have: title, description and image. So I have to make propType for each element (title, desc, img)?

var Movie = React.createClass({
  render: function() {
    return (
      React.createElement(
      "li",
      { key: movie.id },
      React.createElement(MovieTitle, {}),
      React.crreateElement("p", {}, this.props.movie.desc),
      React.createElement("img", { src: this.props.movie.src })
    ));
  },
  propTypes: {
    image: React.PropTypes.object.isRequired,
    des: React.PropTypes.object.isRequired,
    title: React.PropTypes.object.isRequired
  }
});

- Movie Title Class

var MovieTitle = React.createClass({
  render: function() {
    return React.createElement("h2", {}, this.props.movie.title);
  },
  propTypes: {
    title: React.PropTypes.object.isRequired
  }
});

- MovieDescription Class

var MovieDescription = React.createClass({
  render: function() {
    return React.createElement("p", {}, this.props.movie.desc);
  },
  propTypes: {
    desc: React.PropTypes.object.isRequired
  }
});

- Movie Image Class

var MovieImage = React.createClass({
  render: function() {
    return React.createElement("img", {src: this.props.movie.src})
  }, 
  propTypes: {
    image: React.ProTypes.object.isRequired
  }
});

I want to do a maping over array of objects and create Movie Elements and put them into rendered and then put the whole list into div#app.

The problem is, I can make it with movies.map method and make each element with a "loop".

var moviesElements = movies.map(function(movie) {
  return React.createElement(
    "li",
    { key: movie.id },
    React.createElement("h2", {}, movie.title),
    React.createElement("p", {}, movie.desc),
    React.createElement("img", {}, movie.src)
  );
});

var element = React.createElement(
  "div",
  {},
  React.createElement("h1", {}, "List of movies"),
  React.createElement("ul", {}, moviesElements)
);

ReactDOM.render(element, document.getElementById("app"));

But I don't know how to handle this with all these Components made from classes and with propTypes.

I would be grateful for any help :)

As far as I can tell after a quick glance, your Movie class should have a single prop called movie which is of type object. In your Movie component, you're rendering a h2, p and img. No need to build extra components for that. — user5734311
– user5734311, Commented Feb 20, 2019 at 21:13
Ou ye, just one movie prop should be enough. But that's the case if we are talking about extra components. It's a part of a task to make component for every element and then creating whe whole list with components. So there must be Class for every Element that I want to make :( — gularxjs
– gularxjs, Commented Feb 20, 2019 at 21:28
Right, you're probably looking for this: codesandbox.io/s/l941jvkj37 — user5734311
– user5734311, Commented Feb 20, 2019 at 21:39

Martin Prins · Accepted Answer · 2019-02-20 21:27:08Z

1

You can do it just mapping over the movies and creating a react element using the class component as a first parameter.

var moviesElements = movies.map(function(movie) {
  return React.createElement(Movie, {movie: movie});
});

I made a code sandbox example (also fixed some typos and missing parameters from the code you shared)

answered Feb 20, 2019 at 21:27

Martin Prins

1214 bronze badges

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

1 Comment

gularxjs Over a year ago

Thanks, very nice I like it.

Collectives™ on Stack Overflow

React Components with propTypes from array of objects

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