I have a React component. It loads a local JSON file. In the constructor I want to loop through the local JSON file, find an item that matches a URL parameter, and set some state values. Here is my code so far:
import React,{Component} from "react";
import topics from './topics.json';
class Tutorial extends Component {
constructor(props){
super(props);
topics.map((topic, index) => {
if(topic.url === this.props.match.params.url)
{
this.state = {
url: this.props.match.params.url,
name: topic.name
};
}
})
}
render() {
return (
<div className="Tutorial">
<div className="ca-nav-spacer w3-hide-small"></div>
{this.state.name}
{this.state.url}
</div>
);
}
}
export default Tutorial;
I keep getting this error: Array.prototype.map() expects a return value from arrow function.
Must the map function return a value? If I'm not returning a value should I just use a for loop? Can I return the block of JSON and then set the state after the map? What would be the proper way to do this?
Edit: Changed page to topic
My strong recommendation is two-fold:
find method to find the correct topic.find the appropriate topic in the render method:import React, { Component } from "react";
import topics from "./topics.json";
class Tutorial extends Component {
constructor(props) {
super(props);
}
render() {
const selectedTopic = topics.find(
(topic, index) => page.url === this.props.match.params.url
);
return (
<div className="Tutorial">
<div className="ca-nav-spacer w3-hide-small"></div>
{selectedTopic.name}
{this.props.match.params.url}
</div>
);
}
}
export default Tutorial;
Although find would work in most situations, it won't for reasons I did not include. I ended up using a forEach loop in the constructor.
constructor(props){
super(props);
topics.forEach((topic) => {
if(topic.url === this.props.match.params.url)
{
this.state = {
url: topic.url,
title: topic.title
}
}
})
}
Thanks everyone!
Without seeing your JSON structure, it's hard to answer
Changing {} to () might work
from map(() => {}) to map(() => ())
Array.prototype.map() expects a return value from arrow function array-callback-return react
Try using forEach (replace map with forEach) I guess your JSON does not returns an array.