Skip to content

ReactJS. How to sort through data and find equal value of name property to id and store the object in a variable

I have a database and I am trying to sort through the data in the database and find the one that has a name property equal to the id variable that I specified. The id variable works though I am having trouble sorting through and finding the name property equal to the id variable. This what I have tried:

import {useParams} from "react-router-dom";

function StudentInfo() {
    
    const {id} = useParams();
    var studentData = {};

    function infoGetter() {
    
        fetch(
            "{url that I put in real code}"
        )
        .then(response => response.json)
        .then(data => {

            Object.keys(data).filter((element) => {

                if (data[element].studentName.toLowerCase() === id.toLowerCase()) {
                    studentData = {
                        studentName: data[element].studentName,
                        yearGroup: data[element].yearGroup,
                        currentSchool: data[element].currentSchool,
                        parentOrGuardian: data[element].parentOrGuardian,
                        phoneNumber: data[element].phoneNumber,
                        homeAddress: data[element].homeAddress
                    };
                }

                return studentData;

            }).map((filteredElement) => data[filteredElement])
            
        })

    }
    
    
    return (

        <div className="btn-textfield">

            <button className="btn-textfield" onClick={infoGetter}>
                Id: {id}
                <br/><br/>
                StudentInfo:
                <br/><br/>
                {studentData.studentName}
                {studentData.yearGroup}
                {studentData.currentSchool}
                {studentData.parentOrGuardian}
                {studentData.phoneNumber}
                {studentData.homeAddress}
            </button>

        </div>

    );

}

export default StudentInfo;

I think the problem is assigning the value to the object or sorting through. I appreciate any responses.

Answer

Sorry. It was a dumb mistake. I did response => response.json forgetting the parenthsis.