Append data to component with loop from objects list

Robson Published at Dev

Robson

How can I add values from objects list 'tags' to my ReviewTag component and generate all tags ?

here's my code:

var ReviewTag = React.createClass({
    render: function() {
         var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}];
        return (
            <div>
                <input type="checkbox" id="TAG_ID" name="TAG_NAME"/><label htmlFor="TAG_NAME">Tag name</label>
            </div>
        );
    }
});

and I want to render all tags in other component, but I don't know how to do this ?

<div className="characteristics-column">
    <ReviewTag/> //how can I render this tags with data from 'tags' variable ?
</div>

Many thanks for each help solution.

madalinivascu

Use map to loop over the array and output the checkboxes

You can try something like this:

var Tag = React.createClass({
    render: function() {
        return (
            <div>
                <input type="checkbox" id="{this.props.id}" name="{this.props.name}"/><label htmlFor="{this.props.name}">{this.props.name}</label>
            </div>
        );
    }
});

var ReviewTag = React.createClass({
    render: function() {
         var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}];
         const tagComps = tags.map(function(tag){
           return <Tag {...tag} />;
         })
        return (
        <div>
             {tagComps}
        </div>
    );
    }
});

demo: http://jsfiddle.net/2m819ydb/ or:

var ReviewTag = React.createClass({
    render: function() {
         var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}];
         const tagComps = tags.map(function(tag){
           return <div><input type="checkbox" id="{tag.id}" name="{tag.name}"/><label htmlFor="{tag.name}">{tag.name}</label></div>;
         });
        return (
        <div>
             {tagComps}
        </div>
    );
    }
});

React.render(<ReviewTag/>, document.body);

demo:http://jsfiddle.net/2m819ydb/1/

Collected from the Internet

Please contact [email protected] to delete if infringement.