DEV Community

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

Collapse
 
higormarques profile image
Higor Neves Marques • Edited

First, since your data will not change, you don’t need put it into a state.

Try:

import data from '../data/portfolio.json';
...
const listItems = data.map(item =>
  <div>
        <a href={item.url}>
            <img className="img-fluid" 
                  src={item.image} 
                  alt={item.site} />
             <p>{item.site}</p>
          </a>
     </div>
);
...
render() {
    return(
        <div>
            { listItems }
        </div>
      )
}
Enter fullscreen mode Exit fullscreen mode