Help with React .map through JSON data.

Nicholas Wilson — Mon, 25 May 2020 02:08:42 +0000

I just signed up here to get some help as i'm new to react and this is where reactjs.org suggested i go for help, and i'm not sure if this is the right place to ask questions about code but I have an issue that I can't seem to figure out.

I have a .json file in one of my directories and i've imported it into one of my .js files.

I'm trying to set the state to the .json file which i've done successfully. However, I can't figure out how to map through the data and display it in my render method properly.

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

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

    render() {     
        return(
            <div>
                <a href={this.state.data.portfolio[0].url}>
                   <img className="img-fluid" 
                        src={this.state.data.portfolio[0].image} 
                        alt={this.state.data.portfolio[0].site} />
                   <p>{this.state.data.portfolio[0].site}</p>
                </a>
            </div>
        )
    }
}

This works fine, but I want to avoid having to create multiple anchor, image and paragraph tags and loop through to display everything. Any suggestions or places I can go to read how to do this with a local .json file? I tried this...

const myData = this.state.data;
const listItems = myData.map((myData) =>
  <li>{myData}</li>
);

This doesn't work though because I think .map is used for arrays online. Should I use a for loop or something else?

Forem: Nicholas Wilson

Help with React .map through JSON data.