React Component doesnt render within script statement

Question

I'm finding trouble rendering a child component in react. I'm using React-Toolbox for styling.

I have the below json file

{
  "projects":[
    {
    "id":1,
    "project_name":"Tensor Flow",
    "category":"Machine Learning",
    "skills":[{"id":1,"skill_name":"Python"},{"id":2,"skill_name":"Javascript"}]
    },
    {
      "id":2,
      "project_name":"React Toolbox",
      "category":"Frameworks",
      "skills":[{"id":2,"skill_name":"Javascript"},{"id":3,"skill_name":"React"}]
    },
    {
      "id":3,
      "project_name":"Guitar Pro",
      "category":"Music",
      "skills":[{"id":2,"skill_name":"Javascript"},{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"}]
    },
    {
      "id":4,
      "project_name":"Soccer.js",
      "category":"Sports",
      "skills":[{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"},{"id":5,"skill_name":"Golang"}]
    }
  ]
}

this file should be rendered within a component called Project

My Project.jsx file is the below

render(){
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
    return(

      <Card className={styles.card} key={this.props.id}>
        <CardTitle
          title={this.state.project.project_name}
          subtitle={this.state.project.category}
          />
        <CardText>{dummyText}</CardText>

            {this.state.project.skills.map((skill) => {
              console.log('Skill is: ',skill);
              <CardActions>
                <Chip key={skill.id}>{skill.skill_name}</Chip>
              </CardActions>
            })}

      </Card>

The CardActions Component isn't getting rendered in the page for reasons I don't seem to understand. I'm not sure what the reason is.

have you tried to move the key from Chip to CardActions? – QoP Apr 26 '16 at 13:26 — QoP, Apr 26 '16 at 13:26

Brandon · Accepted Answer · 2016-04-26T13:32:29.463

0

You aren't returning CardActions in your map function:

render(){
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
    return(

      <Card className={styles.card} key={this.props.id}>
        <CardTitle
          title={this.state.project.project_name}
          subtitle={this.state.project.category}
          />
        <CardText>{dummyText}</CardText>

            {this.state.project.skills.map((skill) => {
              console.log('Skill is: ',skill);
              return (
                <CardActions key={skill.id}>
                  <Chip>{skill.skill_name}</Chip>
                </CardActions>
              );
            })}

      </Card>
    );
}

edited Apr 26 '16 at 13:32

answered Apr 26 '16 at 13:28

Brandon

38,310
8
82
87

And as @QoP mentioned, you should put the `key` attribute on `CardActions`, since that is the element in the array being rendered – Brandon Apr 26 '16 at 13:32
would it be better if i rendered the cardAction element and looped on the Chip element alone? since i need to specify a separate key for every chip – Jayaram Apr 26 '16 at 13:34
entirely dependent on what you want. Either way, _React_ requires that you put a key attribute on every top-level component in an array. – Brandon Apr 26 '16 at 13:48

React Component doesnt render within script statement

1 Answers1