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

CodePudding user response：

My strong recommendation is two-fold:

• Use the find method to find the correct topic.
• Don't use state to redundantly store information you already have from props. Storing information you already have can result in divergence. In this case, we can just 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;

CodePudding user response：

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

Another answer

Try using forEach (replace map with forEach) I guess your JSON does not returns an array.