I can not collect data from my json - React

Question

I have created a menu, with a submenu and a third child. So far I had it done simply with a json in local const data that is now commented. I need that from now on the data is collected from my json but I do not know how to do it. As it is now I get the following error: 'data' is not defined ( in my render)

class Nav extends Component {
    constructor(props){
        super(props)
        this.state = {
          navigation:[]
        }
    }

    componentWillMount() {
    fetch('json_menuFIN.php')
    .then(response => response.json())
    .then(data =>{
        this.setState({navigation: data });
        console.log( data)
    })
}
    render(){
        const { data = null } = this.state.navigation;
        if ( this.state.navigation && !this.state.navigation.length ) { // or wherever your data may be
            return null;
        }

        return (
            <Menu data={this.state.navigation}/>
        )        
    }

}

const renderMenu = items => {
    return <ul>
      { items.map(i => {
        return <li>
          <a href={i.link}>{ i.title }</a>
          { i.menu && renderMenu(i.menu) }
        </li>
      })}
    </ul>
}

const Menu = ({ data }) => {
    return <nav>
      <h2>{ data.title }</h2>
      { renderMenu(data.menu) }
    </nav>
}

I do not know what else to do to make it work with what I have. Thank you very much for the help.

Answer 1

Your navigation property in state has no title and menu properties, so you pass an empty array to Menu component. That's why you have an error Cannot read property 'map' of undefined . You should change your state initialization in constructor .

class Nav extends Component {
    constructor(props){
        super(props);
        this.state = {
            navigation: {//<-- change an empty array to object with a structure like a response from the server 
                menu: [],
                title: ''
            }
        }
    }

    //...

    render(){
        return (
            <Menu data={this.state.navigation} />
        )
    }

}

Answer 2

Don't use componentWillMount as it is deprecated and will soon disappear, the correct way is to use componentDidMount method along with a state variable and a test in your render.

this.state = {
    navigation: [],
    init: false
}

---

componentDidMount() {
    fetch('json_menuFIN.php')
    .then(response => response.json())
    .then(data => {
         this.setState({ navigation: data, init: true });
         console.log( data)
    })
}

Also, you cannot extract the data variable from your navigation variable in the state, navigation has been defined with your data response, so use it directly.

render() {
    const { navigation, init } = this.state;

    if(!init) return null

    return (
        <Menu data={navigation}/>
    )        
}

I assume that navigation is always an array, whatever you do with it.