reactjs - looping json data in Class Component

Question

This is my index.js where I try to refer SampleApp

import React, { Component } from "react";
import { render } from "react-dom";
import './index.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";
import SampleApp from "./pages/SampleApp";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      isUserAuthenticated: true
    };
  }

  render() {
    return (
        <Router>
            <Switch>
              <Route
                exact
                path="/"
                render={() => {
                    return (
                      <Redirect to="/SampleApp" />
                    )
                }}
              />
               <Route exact path="/SampleApp" component={SampleApp} />
            </Switch>
        </Router>
    );
  }
}

render(<App />, document.getElementById("root"));

This is my SampleApp.js file. here I'm importing the Cards component from Cards.jsx

import React from 'react';
import '../../src/App.css';
import Cards from '../cards/cards';

const SampleApp = props => (
  
  <React.Fragment>

    <div className="App">
      <div>
        <div className="header">
          <div className="header_fonts">
            Sample Application
            </div>
        </div>
        <div>
          <div className="content_header_fonts">
            This is sample app
            </div>
          <div className="content_fonts">
            Sample app to deomntrate ideas.
          </div>
          <Cards></Cards>
        </div>
      </div>
    </div>
  </React.Fragment>

  
)

export default SampleApp;

this is my Cards.jsx file. here I'm importing Card component and json data

import React, { Component } from "react";
import Card from './cardUI';
import CardData from '../source/data.json';

class Cards extends Component {

    render() { 
        return 
        ( 
        <div className="container-fluid d-flex justify-content-center">
            <div className="row">
                {
                CardData.map((
                  {title, desc, icon, intro,developer_guide,api_ref }, id) => 
                  (
                    <div className="col-md-4">
                    <Card 
                    title={title} 
                    desc={desc} 
                    intro={intro} 
                    developer_guide={developer_guide} 
                    api_ref={api_ref}/>
                    </div>
                  ))
                  }

            
            </div>
        </div> 
        );
    }
}
 
export default Cards;

this is a sample of my JSON file

[
    {
        "id" : 7,
        "title" : "Melon Munchee",
        "icon" : "https://cdn.onlinewebfonts.com/svg/img_393496.png",
        "desc" : "If you are an Avatar fan, then this api is for you. Here you can find everything from Episodes to Characters.",
        "intro": "intro_7",
        "developer_guide": "d_link7",
        "api_ref": "api_link7"
    },
    {
        "id" : 8,
        "title" : "Browns Barns",
        "icon" : "https://cdn.onlinewebfonts.com/svg/img_386567.png",
        "desc" : "Baseball fans? Computer nerds? Now, in one place, you have baseball data and an api to access it. Have fun!.",
        "intro": "intro_8",
        "developer_guide": "d_link8",
        "api_ref": "api_link8"
    }
]

Card.jsx file This is how implemented the Card component

import React from 'react';
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import * as Icon from '../../node_modules/react-bootstrap-icons';
import './card-style.css';


const Card = props =>{
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         <Icon.Alarm></Icon.Alarm>
            <h4 className="card-title">
                {props.title}
            </h4>
            <p className="card-text text-secondary">
                {props.desc}
            </p>
            <ul class="list-group">
                <li class="list-group-item"><a href="#" className="card-link">{props.intro}</a></li>
                <li class="list-group-item"><a href="#" className="card-link">{props.developer_guide}</a></li>
                <li class="list-group-item"><a href="#" className="card-link">{props.api_ref}</a></li>
            </ul>
         </div>
     </div>
    )
}

export default Card;

but I'm getting an error as following

Error: Cards(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 19 stack frames were collapsed. Module. src/index.js:44 41 | } 42 | } 43 |

44 | render(, document.getElementById("root"));

Answer 1

It's just a typo mistake. When you use line terminator next to the return statement, JS adds semicolon automatically and that will be the end of function execution and returns undefined. That's why your Cards component is not able to find the JSX because Cards render returns undefined.

As per MDN docs.

The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

To fix this, update Cards render function with this

 class Cards extends Component {
    render() { 
      return ( // was the issue earlier
      <div className="container-fluid d-flex justify-content-center">
          <div className="row">
              {
                CardData.map(({ title, desc, icon, intro,developer_guide,api_ref }, index) => (
                  <div className="col-md-4" key={title + index}>
                    <Card 
                    title={title} 
                    desc={desc} 
                    intro={intro} 
                    developer_guide={developer_guide} 
                    api_ref={api_ref} />
                  </div>
                  )
                )
              }
          </div>
      </div> 
      );
    }
  }