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

multiple child.props in reactjs

Raviraj Solanki answered on March 25, 2021 Popularity 9/10 Helpfulness 2/10

answer multiple child.props in reactjs

related passing multiple props to child component in react

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 reactjs

Link to this answer
Share Copy Link

Contributed on Sep 22 2022

Raviraj Solanki

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Mar 25 2021

Cooperative Caribou

0 Answers Avg Quality 2/10

multiple child.props in reactjs

Contents

More Related Answers

multiple child.props in reactjs

Closely Related Answers

passing multiple props to child component in react

Grepper

Documentation

Social

Legal

Contact

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