passing props to a static React Components

1
votes

I have created a static method in a react Class component when I pass props it does not seem to me that they are passed, however, the children prop for passed without any problem component calling

This is the component and the given props when consoling I receive undefined !! The Component

class Tabel extends Component {
static Head = ({ children, ...props }) => (
    <span className="table-head">
        {children}
    </span>
)

static Body = ({ children, ...props }) => (
    <div className="tabel-body">{children}</div>
)

render = () => (
    <div className='tabel-container' >
        {this.props.children}
    </div>
)

}

I am passing props like this

<Tabel.Cell
  mainContent='$10 175.00'
  subContent={{ content: '12.4%', classes: 'stock-up' }}
/>
2
reactjs
It's better to put some code here. Linking to screenshots is not a good idea. - Mrchief
You have declared them as component class level static methods but you are calling those as components which isn’t correct. The static methods needs to be called like functions like Component.staticFunctionName() but <Component.staticFunctionName /> - Hemadri Dasari
@Think-Twice it's working normally, but the problem is with the forwarding the props! - Eslam Abu Hugair

2 Answers

2
votes

you can spread the props and it should not be an issue:

class Tabel extends Component {
static Head = ({ children, ...props }) => (
    <span className="table-head"  {...props}>
        {children}
    </span>
)

static Body = ({ children, ...props }) => (
    <div className="tabel-body" {...props} >{children}</div>
)

render = () => (
    <div className='tabel-container' >
        {this.props.children}
    </div>
)

}
1
votes

May be try like this

static Head = props => (
    <span className="table-head">
        {props.children}
        {props.prop1Name}
        {props.prop2Name}
    </span>
)