javascript - How are the countries displayed from the json file

Question

I am really new and I got this piece of code that displays the countries before filtering it. I understood the filtering part. But I am not able to understand how the countries are getting displayed before the filtering on the webpage. I need to include a checkbox for each country and I know how to do this if it was the list of items but I am not able to understand this. How can I add the checkbox if I don't know what I am adding it for? Can anyone please help me?

import React, { Component, useCallback, useState  } from "react";


import {
  Button,
  Input,
  Footer,
  Card,
  CardBody,
  CardImage,
  CardTitle,
  CardText
} from "mdbreact";

import blankImg from "./blank.gif";

import "./style.css";
import "./flags.min.css";

import countriesList from "./countries.json";

class App extends Component {
  state = {
    search: ""
  };

  handleClick = () => { this.setState({ search: ""}); }

  renderCountry = country => {
    const { search } = this.state;
    var code = country.code.toLowerCase();
  function toggle(source) {
      
    }
    
   
    return (
      <div className="col-md-3" style={{ marginTop: "20px" }}>
        <Card>
          <CardBody>
            <p className="">
              <img
                src={blankImg}
                className={"flag flag-" + code}
                alt={country.name}
              />
            </p>
            <CardTitle title={country.name}>
              {country.name.substring(0, 15)}
              {country.name.length > 15 && "..."}
            </CardTitle>
          </CardBody>
        </Card>
      </div>
    );
  };

  onchange = e => {
    this.setState({ search: e.target.value });
  };
  
  

  render() {
    const { search } = this.state;
    const filteredCountries = countriesList.filter(country => {
      return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
    });
   

    return (
      <div className="flyout">
        <main style={{ marginTop: "4rem" }}>
          <div className="container">
            <div className="row">
             
              <div className="col">
                
                <Input
                  label="Search Country"
                  icon="search"
                  onChange={this.onchange}
                />
                
                
                <button onClick={this.handleClick}> Click to clear</button>
               
              </div>
              <div className="col" />
            </div>

            <div className="row">
            
              {filteredCountries.map(country => {
                return this.renderCountry(country);
              })} 
            </div>
          </div>
        </main>
        <Footer color="indigo">
          <p className="footer-copyright mb-0">
            &copy; {new Date().getFullYear()} Copyright
          </p>
        </Footer>
      </div>
    );
  }
}

export default App;

question from:https://stackoverflow.com/questions/65921978/how-are-the-countries-displayed-from-the-json-file

Answer 1

The magic happens in your renderCountry function. To add a checkbox you could change the return value in the CardBody to something like this:

   <CardBody>
        <input type="checkbox" /> // Add the checkbox here
        <p className="">
          <img
            src={blankImg}
            className={"flag flag-" + code}
            alt={country.name}
          />
        </p>
        <CardTitle title={country.name}>
          {country.name.substring(0, 15)}
          {country.name.length > 15 && "..."}
        </CardTitle>
      </CardBody>