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.

2. 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 :)

Answer 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)