Search code examples
reactjsdictionaryrecurring

Keep catching same value within map() method recurring

In my project, I have a component for rendering all the records from a table in the database. I'm using map() method to populate the records to the page. The components with values were displayed all right on the page. However, in the console, the console.log result is recurring and will never stop. enter image description here

Here is my code in the component which using map(). CourseCard.js

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import fontawesome from "@fortawesome/fontawesome";
import {faGraduationCap, faArrowAltCircleRight, faUser} from '@fortawesome/fontawesome-free-solid'
import {useNavigate, useParams} from "react-router-dom";

fontawesome.library.add(faGraduationCap, faArrowAltCircleRight, faUser);

function CourseCard({courses}) {
    let navigate = useNavigate();
    const routeCourseDetail = (id) => {
        return () => {
            let path = `/courses/detail/${id}`;
            navigate(path);
        }
    }

    return (
        <div>
            {courses.map((course) => {
                return <div className="col-sm col-md col-lg">
                    <div className="card blue" key={course.id} onClick={routeCourseDetail(course.id)}>
                        <div className="inner">
                            <h1 style={{color: "white"}}>{course.name}</h1>
                            <h2 style={{color: "white", marginTop: "-0.5em"}}>{course.level}</h2>
                        </div>
                        <div className="icon" style={{color: "white"}}>
                            {/*<FontAwesomeIcon icon="fa-user" />*/}
                            <FontAwesomeIcon icon="graduation-cap"/>
                        </div>
                        <div className="footer">
                            More info <FontAwesomeIcon icon="arrow-alt-circle-right"/>
                        </div>
                    </div>
                </div>
            })}
        </div>
    )
}

export default CourseCard;

And the code for making the component formed in a matrix. CourseMatric.js

import React, {useEffect, useState} from "react";
import CourseCard from "./CourseCard";
import {useNavigate} from "react-router-dom";
import axios from "axios";

function CourseMatrix() {
    let navigate = useNavigate();

    const routeAdd = () => {
        let path = "./new";
        navigate(path);
    }

    const [coursesList, setCoursesList] = useState([]);

    useEffect(() => {
        axios.get(`http://localhost:3001/courses`).then((response) => {
            setCoursesList(response.data);
            console.log(response.data);
        })
    });

    return (
        <div className="main_content grid-2">
            <div className="wrapper">
                <CourseCard courses={coursesList}/>
            </div>
            <div className="new-line">
                <button className="green_bt option_list round mr" onClick={routeAdd}>Add
                </button>
            </div>
        </div>
    )
}

export default CourseMatrix;

Anyone helps me to figure out which part is not correct to cause this problem to occur? Many thanks.

Solution

  • You need to add dependency in useEffect :

      useEffect(() => {
        axios.get(`http://localhost:3001/courses`).then((response) => {
            setCoursesList(response.data);
            console.log(response.data);
        })
    },[]);

    useEffect asks for dependency so that it executes the effect only when the value is changed. The empty [] dependency will only execute the effect once. Since you didn't add any dependency , the effect was getting executed on every re-render causing infinite loop (setCoursesList(response.data) was causing re-render) .