Breaking News: Grepper is joining You.com. Read the official announcement!

passing multiple props to child component in react

Cooperative Caribou answered on March 25, 2021 Popularity 10/10 Helpfulness 2/10

answer passing multiple props to child component in react

related multiple child.props in reactjs

passing multiple props to child component in react

Comment

<ChildComponentName value1={this.state.value1} value2={this.state.value2}/>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Mar 25 2021

Cooperative Caribou

0 Answers Avg Quality 2/10

Closely Related Answers

multiple child.props in reactjs

Comment

import { Children } from 'react'

const Sample = ({ title, children }) => {
  let _body, _title

  Children.forEach(children, child => {
    if (child.type === SampleTitle) {
      return _title = child
    }

    if (child.type === SampleBody) {
      return _body = child
    }
  })

  if (!_title) _title = <div className='title'>{title}</div>
  if (!_body) _body = <div className='title'>{children}</div>

  return (
    <div className='panel'>
      {_title}
      {_body}
    </div>
  )
}

const SampleTitle = ({ children }) => <div className='title'>{children}</div>
const SampleBody = ({ children }) => <div className='body'>{children}</div>

Sampe.Title = SampleTitle
Sample.Body = SampleBody


// Now you can apply

<Sample title="my title">
  <div>my body</div>
</Sample>

<Sample title="my title">
  <Sample.Body>my body</Sample.Body>
</Sample>

<Sample title="my fallback title">
  <Sample.Title>my overriding title</Sample.Title>
  <Sample.Body>my body</Sample.Body>
</Sample>

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 22 2022

Raviraj Solanki

0 Answers Avg Quality 2/10

passing multiple props to child component in react

Contents

More Related Answers

passing multiple props to child component in react

Closely Related Answers

multiple child.props in reactjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.