I have two page with same logic but different content and i want to use the same object but parse different json content.

Projects and Experience page use the same ProjectList and Project. I want to pass different content to Projects.js and Experience.js

Project:

import React, {Component} from 'react';
import Navigation from "../components/Nagivation";
import ProjectList from "../components/experience/ProjectList";
import { portfolioData } from '../data/portfolioData';

export default class Projects extends Component {
    state = {
        projects:portfolioData
    };

    render() {
        let {projects} = this.state;
        return (
            <div className="portfolio">
                <Navigation/>
                {
                    <ProjectList
                        item={projects}
                    />
                }
            </div>
        );
    }
};

ProjectList

import React, {Component} from 'react';
import Project from "./Project";

export default class ProjectList extends Component {

    render() {
        console.log(this.props.item)
        let {projects} = this.props.item;

        return (
            <div className="portfolioContent">
                <h3 className="radioDisplay">Test</h3>

                <div className="projects">
                    {
                        projects.map(item => {
                            return (
                                <Project
                                    key={item.id}
                                    item={item}
                                />
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

I have Uncaught TypeError: Cannot read properties of undefined (reading 'map') on the line <div className="projects">

Project.js

import React, {Component} from 'react';

export default class Project extends Component {
    state = {
        showInfo: false
    }

    handleInfo = () => {
        this.setState({
            showInfo:!this.state.showInfo
        })
    }

    render() {
        let {name, periode, info, picture} = this.props.item

        return (
            <div className="project">
                <h5>{periode}</h5>
                <h3>{name}</h3>
                <img src={picture} alt="" onClick={this.handleInfo} />
                //some stuffs
        );
    }
}

I don't want to use map, because i want to iterate only in ProjectList.