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.

Answer 1

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>
    );
}