'React - Share props between 2 components

I have a layout component that calls different components inside. They are the header, breadcumbs , main and filter (sidebar left) and footer

I have a "filters" component that when selecting on the "select" I want it to send this information to the "categories" component.

That is, if in the component "filters" I filter by brand "FORD" I want the component "categories" to receive the brand "FORD"

The code like this works, but I can't pass the properties of the Filterheader component to the Name component (alias of category name)

Layout

import NavigationGuest from '@/components/Layouts/NavigationGuest'
import Footer from '@/components/Layouts/FooterGuest'
import { useRouter } from 'next/router'
import FilterHeader from "@/components/filters/Header";

const GuestLayout = ({ children }) => {
    const router = useRouter()

    return (
        <div className="min-h-screen bg-gray-100">

            <NavigationGuest />


            <FilterHeaderNeveras />

            {/* Page Content */}
            <main>{children}</main>

            <Footer />
        </div>
    )
}

export default GuestLayout

FilterHeader

import TextField from '@mui/material/TextField'
import Autocomplete from '@mui/material/Autocomplete'
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
import axios from 'axios'
import Button from '@mui/material/Button'

const FilterHeaders = () => {
    useRouter()

    const [jsonResultBrands, setJsonResultBrands] = useState([])

    const [selectMarca, setSelectMarca] = useState([])

    const handleChangeBrand = (event, value) => {
        setSelectMarca(value)
    }

    const handleButtonCLick = (event, value) => {
        console.log(selectMarca)
    }

    useEffect(() => {
        fetch(
            'http://localhost:8000/api/productcategoryproperties/3/category/marca/type',
        )
            .then(response2 => response2.json())
            .then(json2 => setJsonResultBrands(json2))
    }, [])

    return (
        <div style={{ padding: '10px' }}>
            <Autocomplete
                onChange={handleChangeBrand }
                disablePortal
                id="combo-box-demo1"
                key={jsonResultCalifEnergetica.id}
                options={jsonResultBrands}
                sx={{ width: '100%' }}
                getOptionLabel={jsonResults => `${jsonResults.name}`}
                renderInput={params => <TextField {...params} label="Brand" />}
            />

 

            <Button variant="outlined" onClick={handleButtonCLick}>
                Buscar
            </Button>
        </div>
    )
}

export default FilterHeaders

Category Name

import Head from 'next/head'
import axios from 'axios'
import GuestLayout from '@/components/Layouts/GuestLayout'
import { useRouter } from 'next/router'
import Grid from '@mui/material/Grid'
import FilterHeaders from '@/components/filters/Header'


const Name = ({ itemsList }) => {
    const router = useRouter()

    return (
        <GuestLayout>
            <Head>
                <title>Product Category {router.query.name}</title>
            </Head>

            <div className="py-12">
                Filters: <br />
                <FilterHeader />
            </div>
        </GuestLayout>
    )
}

Name.getInitialProps = async () => {

    const { data } = await axios.get('http://localhost:8080/api/category/1')

    return { itemsList: data }
}

export default Name

reactjs react-component

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React - Share props between 2 components

Sources

Related Questions