Categories
Mastering Development

How to pass array as result from one functional component to another in React

I want to pass data stored in const mappedData from FetchDataComponent.js to ReactSelectComponent.js. Is there any way of doing this with functional components?
With code under i get Error: Objects are not valid as a React child

FetchDataComponent.js

    import React,{useState, useEffect} from "react";
    import axios from "axios";
    import _ from "lodash";

const FetchDataComponent = () => {
    const [data, setData] = useState({product: []})
    useEffect(
        () => {
            (async () => {
                const result = await axios.get(
                    '/products-data'
                )
                setData(result.data)
            })()
        }, [])

console.log("data.product:")
console.log(data.product)

const mappedData = _.map(data.product, "proizvod_naziv")
console.log("mappedData:")
console.log(mappedData)
console.log(typeof mappedData)

return ({mappedData});
}

export default FetchDataComponent;

ReactSelectComponent.js

import React, {useState} from "react";
import Select from "react-select";

const ReactSelectComponent = () => {

    // place for data from FetchDataComponent.js
    const options = [
        {
            // value: ,
            // label: 
        },
        {value: 'strawberry', label: 'Strawberry'},
        {value: 'vanilla', label: 'Vanilla'}
    ]

    return (<Select options={options}/>)

}
export default ReactSelectComponent;

console.log(mappedData):

(3) […]
​0: "M-Z-8Nm"
​1: "M-P-10Nm"
​2: "V-H"
​length: 3
​<prototype>: Array []

console.log(typeof mappedData):

object

Leave a Reply

Your email address will not be published. Required fields are marked *