React components override inside render

2300 views javascript
8

I am new in react.

I try to output two components with react 16+, that starting like this:

function InsuranceInfo(props) {...

// and

function InsuranceCustomerInfo(props) {...

and main component render function look like this

render()
{
      return (
            <InsuranceInfo args={this.state.orderIfo}/>, 
            <InsuranceCustomerInfo args={this.state.orderIfo}>
      )
}

when i load the page i see only last one.

can any one help please? thank you!

answered question

Wrap your components in a div, React components only should return one single component or one single array of them. Also, don't forger the closing slash in your second component.

3 Answers

9

The proper way to achieve what you want is to use HOC (Higher-Order Components)

Have a look at the documentation here for more details.

posted this
11

Try this, which use Fragment

render()
{
  return (
     <>
        <InsuranceInfo args={this.state.orderIfo}/>
        <InsuranceCustomerInfo args={this.state.orderIfo}>
     </>
  )
}

Or array

render()
{
  return [
      <InsuranceInfo key="info" args={this.state.orderIfo}/>, 
      <InsuranceCustomerInfo key="customer" args={this.state.orderIfo}>
  ];
}

posted this
6

Do not use comma (,) sign between component. Either wrap the returning component in some html element

render()
{
    return (
       <div>
         <InsuranceInfo args={this.state.orderIfo}/>
         <InsuranceCustomerInfo args={this.state.orderIfo} />
       </div>
    )
}

or use React Fragments:

render()
{
    return (
        <React.Fragment>
           <InsuranceInfo args={this.state.orderIfo}/>
           <InsuranceCustomerInfo args={this.state.orderIfo} />
        </React.Fragment>
    )
}

posted this

Have an answer?

JD

Please login first before posting an answer.