CODEWITHSUNDEEP
javascriptreactjs
Developer Strange
Developer Strange

Reputation: 2198

How to pass a component as props to another component in react js?

I have a component like this

<ReactSuperSelect placeholder="Nothing Selected" 
                        clearSearchOnSelection={true}
                        deselectOnSelectedOptionClick={true}
                        dataSource={testData}
                        multiple={true}
                        onChange={this.handlerExample} 
                        keepOpenOnSelection={true}
                        searchable={true} />

I assign this to a variable and passed as a props but it display there like a string. How to achieve this?

Upvotes: 0

Views: 75

Answers (1)

Sajith Edirisinghe
Sajith Edirisinghe

Reputation: 1727

You need to declare the component as below

const myComponent = <ReactSuperSelect placeholder="Nothing Selected" 
                    clearSearchOnSelection={true}
                    deselectOnSelectedOptionClick={true}
                    dataSource={testData}
                    multiple={true}
                    onChange={this.handlerExample} 
                    keepOpenOnSelection={true}
                    searchable={true} />

Next pass it as a prop to your childComponent as below.

<ChildComponent subComponent={myComponent}/>

Assuming the variable name of prop is subComponent (as shown above) you can show the component passed via props in the render method of ChildComponent as below.

render() {
    return (
        <div>
            {this.props.subComponent}
        </div>
    )
}

Upvotes: 2

Related Questions