Discussion on: Help with React .map through JSON data.

[Utkal]

The solution given by Higor Neves is perfect. Here is another way to solve : You can create a functional component RenderPortfolio that renders each portfolio element in your data.json list. While mapping through each element don't forget to give a key for each div being created. For now I have given 'url' property hoping that it will be unique. I hope there wil be no syntactical or logical errors.

//other react imports
import data from '../data/portfolio.json';

function RenderPortfolio({portfolio}) {
    return (
        <a href={portfolio.url}>
            <img className="img-fluid" 
                src={portfolio.image} 
                alt={portfolio.site} />
            <p>{portfolio.site}</p>
        </a>
    );
}

class Portfolio extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : data
        };
    }

    render() {

        const portfolio_list = this.state.data.map( (element) => {
            return (
                <div key={element.url}>
                    <RenderPortfolio portfolio = {element} />
                </div>
            );
        });

        return(
            <React.Fragment>
                {portfolio_list}
            </React.Fragment>
        );
    }
}