How to Pass Components to Another Component?

Question

I am trying to make my own step wizard(I seen a few online but none really meet my needs) and this will be good practice.

I will have a StepWizard and I want to pass into this step wizard an array of json that will look like this

 const steps =   [ { name: "Step 1", component: <Step /> }, { name: "Step 2", component: <Step2 /> }, { name: "Step 3", component: <Step3 /> }]

Each "Step" is it's own component.

 <StepWizardComponent  steps={this.steps}/>

When I do a console.log(this.props) in StepWizardComponent, I just see null.

I am using react 16.

declaring it as `const steps` tells me it's not linked to the Class, and even if it was stateless you wouldn't use `this`. Can you just pass in steps={steps}`? — Sterling Archer, Jun 07 '18 at 20:30
You should store your components in a state of root component, parent of StepWizard. This way your data isn't preserved. Or use static (property) initializers. — Mirko Acimovic, Jun 07 '18 at 20:30
@SterlingArcher - Ah I think your right, I am seeing stuff now. I guess my next question would be is there anything special to render the components? — chobo2, Jun 07 '18 at 20:33
Possible duplicate of [Pass react component as props](https://stackoverflow.com/questions/39652686/pass-react-component-as-props) — Harshal Yeole, Jun 07 '18 at 20:51

score 0 · Accepted Answer · answered Jun 08 '18 at 08:02

If you want to use "const" in the render function you need to declare the const outside of the class. If you want to have a variable declared into the class constructor you can use "this".

You can see an example of "this" in this code snippet.

class Wizard extends React.Component{
 render(){
      console.log("this.props are..", this.props);
  
      return(
         <div>
            {this.props.steps.map((step, rowId) =>{
           return (<div key={rowId}>{step.name} {step.component} </div>);
                })}
        </div>
    );
  }
}

class Step extends React.Component{
 render(){
      return(
         <div style={{width:'100%', backgroundColor:'red'}}>I am Step component</div>
           );
     }
}

class Step2 extends React.Component{
 render(){
       return(
         <div style={{width:'100%', backgroundColor:'green'}}>I am Step2 component</div>
        );
    }
}

class Step3 extends React.Component{
 render(){
       return(
         <div style={{width:'100%', backgroundColor:'yellow'}}>I am Step3 component</div>
        );
     }
}


class Hello extends React.Component {
  constructor(props){
    super(props);
    
    this.steps = [ { name: "Step 1", component: <Step /> }, { name: "Step 2", component: <Step2 /> }, { name: "Step 3", component: <Step3 /> }];
   }
  
  
  render() {
    return (
     <div>
      Hello
      <Wizard steps = {this.steps}/>
    </div>);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

How to Pass Components to Another Component?

1 Answers1