CODEWITHSUNDEEP
javascriptreactjs
eibersji
eibersji

Reputation: 1216

Pass this.props.params to a child component

I am new to ReactJS and and this is not my own project and I am trying to figure out things.

This is my index.js render 

render() {
    console.log("this.props", this.props.params)
    console.log("slug", this.props.params.brandName)
    var { data, items2 } = this.state 
    let { brandList, brandProducts } = this.props
    var { data } = this.props.brandProducts

    var filterImage = brandList.data.length === 0 ? [] : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].media

    var name = brandList.data.length === 0 ? "" : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].name

    var checkImage = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "images")
    var checkBanner = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "banner-image")

    return (
        <div>
            {
                this.props.brandList.loading ? <LoadingSection/>
                : <div>
                    <Banner data={checkBanner}/>

                     <div className="row margin-none">
            <div className="col-lg-2" style={{backgroundColor: "white"}}>
                {
                    _.isEmpty(checkImage)   ? <div className="card shadow rounded mx-auto brand-logo-text card-logo-text"><h2 className="align-middle text-center">{name}</h2></div>
                                            : <img src={checkImage[0].url} className="img-thumbnail shadow mx-auto rounded brand-logo" alt="..."/>

                }
                <AdvancedSearch />

    //some more code here

so what I want to happen is, in my AdvancedSearch.js, I want to transfer this code. 

    var filterImage = brandList.data.length === 0 ? [] : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].media

    var name = brandList.data.length === 0 ? "" : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].name

    var checkImage = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "images")

and this, somewhere in the render in AdvancedSearch

{
_.isEmpty(checkImage)   ? <div className="card shadow rounded mx-auto brand-logo-text card-logo-text"><h2 className="align-middle text-center">{name}</h2></div>
: <img src={checkImage[0].url} className="img-thumbnail shadow mx-auto rounded brand-logo" alt="..."/>

}

but it says that brandName is undefined.

my route 

<Route path="/:brand/:brandName" component={Brand} />

points to my index.js. how can I pass my params from index.js to AdvancedSearch.js ?

EDIT::

console.log("this.props", this.props.params)

returns 

{brand: "seller", brandName: "nestle"}

and 

console.log("slug", this.props.params.brandName)

returns

nestle

Upvotes: 0

Views: 107

Answers (2)

Sanjay Singh
Sanjay Singh

Reputation: 61

pass props from parent to child component to access it in child component. suppose you want to access brandName in AdvancedSearch, you need to add it in parent,then you will be able to access brandName in child component( AdvancedSearch js file)

Upvotes: 0

Ivo
Ivo

Reputation: 2518

The best way to send the data from a parent to a child component is through the props.

In your case you could have the following in your index.js file :

<AdvancedSearch brandList={this.props.brandList} brandProduct={this.props.brandProducts} params={this.props.params} />

In your AdvancedSearch.js do not forget to "catch" those in the variable you are using, meaning to declare again in this file :

const { brandList, brandProducts } = this.props
const { data } = this.props.brandProducts

also AdvancedSearch has to be a Class component as it refers to "this.props.params", if you make it stateless then refer to props.params and add the props argument in your function declaration.

Upvotes: 2

Related Questions