Tengo dos páginas con la misma lógica pero contenido diferente y quiero usar el mismo objeto pero analizar contenido json diferente.

Las páginas Projects y Experience usan el mismo ProjectList y Project . Quiero pasar contenido diferente a Projects.js y Experience.js

Proyecto:

 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> ); } };

Lista de proyectos

 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> ); } }

Tengo Uncaught TypeError: Cannot read properties of undefined (reading 'map') en la línea <div className="projects">

Proyecto.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 ); } }

No quiero usar el mapa, porque quiero iterar solo en ProjectList.