Gfrktyl

I have a component that renders JSON file and shows products named 'product list', another component named 'person' which is used to show product items, both are working fine, but the third component called menucat includes the scrolling menu from https://www.npmjs.com/package/react-horizontal-scrolling-menu, the menu list items on menucat are hardcoded, I want to pass a function from menucat to productlist or from productlist to menucat which can change the menu items using a mapped JSON, making it dynamic. will explain more below

productlist

import React from "react";

import Person from "./Person";MenuCat";

import MenuCat, {a, onSelect, selected}  from "../components/





class ProductList extends React.Component {

    state = {

        error: null,

        isLoaded: false,

        items: , 

        MenuItems: ,

        selected: 0,

    };



    componentDidMount() {

        fetch("items.json")

            .then(res => res.json())

            .then(

                result => {

                    this.setState({

                        isLoaded: true,

                        items: result,

                        menuItems: result.children.name

                    });

                },



                error => {

                    this.setState({

                        isLoaded: true,

                        error

                    });

                }

            );

    }



    constructor(props) {

        super(props);

        this.onSelect = this.onSelect.bind(this);

    }



    onSelect(key) {

        this.setState({selected: key});

    }





    render() {



        const { error, isLoaded, items } = this.state;

        if (error) {

            return (

                <div>

                Error:{" "}

            {error.message  }

            {console.log("check 1:", items)}

        </div>

        );

        } else if (!isLoaded) {

            return (

                <div>

                <img

            src="loading.gif"

            alt="loading"

            height="100"

                />

                </div>

        );

        } else {

            return (

                <div>

                <MenuCat onSelect={this.onSelect} />

                <div className="row">

                {items.children[this.state.selected].children.map(item => (

                    <Person

            className="person"

            Key={item.name}

            Title={item.name}

            imgSrc={item.image_url}

        >



            {item.base_price}

        </Person>

        ))}

        </div>

            </div>

        );

        }

    }

}

MenuCat

import React, { Component } from "react";

import ScrollMenu from "react-horizontal-scrolling-menu";

import "../menu.css";



// list of items





const list  = [

    { name: "category1" , id : 0},

    { name: "category2" , id : 1},

    { name: "category3" , id : 2},

    { name: "category4" , id : 3},

    { name: "category5" , id : 4},

    { name: "category6" , id : 5},

    { name: "category7" , id : 6},



];





// One item component

// selected prop will be passed

const MenuItem = ({ text, selected }) => {

    return <div className="menu-item">{text}</div>;

};



// All items component

// Important! add unique key

export const Menu = list =>

    list.map(el => {

        const { name } = el;

        const { id } = el;



        return <MenuItem text={name} key={id} />;

    });



const Arrow = ({ text, className }) => {

    return <div className={className}>{text}</div>;

};



const ArrowLeft = Arrow({ text: "<", className: "arrow-prev" });

const ArrowRight = Arrow({ text: ">", className: "arrow-next" });



export class Menucat extends Component {

    state = {

        selected: "0"

    };



    onSelect = key => {

        console.log(`onSelect: ${key}`);

        this.setState({ selected: key});

        this.props.onSelect(key);

    };



    render() {

        const { selected  } = this.state;

        // Create menu from items

        const menu = Menu(list, selected);



        return (

            <div className="App">

            <ScrollMenu

        data={menu}

        arrowLeft={ArrowLeft}

        arrowRight={ArrowRight}

        selected={selected}

        onSelect={this.onSelect}

        />

        </div>

    );

    }

}



export default Menucat;

I want the items from menuItems: result.children.name to be added in the menu bar instead of "item1" "item2" etc.I am not sure how this is can be achieved would appretiate the help.

this is how the JSON looks like
json data