React returning Error decoder message message

Question

I am trying to create very simple multistep form using react. My main component which is handling state for steps looks like this:

...

renderStepItem = () => {
switch(this.state.step) {
  case 1:
    return  <ImportStep nextStep={this.nextStep} />
  case 2:
    return  <ImportStep previousStep={this.previousStep} nextStep={this.nextStep} />
  case 3:
    return  <ImportStep previousStep={this.previousStep} />
}
}

...

This is switch which should return Component that should be rendered based on step state

Then render:

render() {
  return(
    {this.renderStepItem()}
  )
}

The problem is that i am getting following error message:

Error

Objects are not valid as a React child (found: object with keys {nextStep}).

I was trying to go through some tuts etc to solve it. But i am guessing that i am passing something that i am unable to do.

Can anybody give me some hint please?

UPDATE:

render() {

    const importSteps = AppConfig.importSteps;

    return (
      <Block extend={{
        width: '80%',
        margin: '25px auto'
      }}>
        <TabNav extend={{
          border: '1px solid black',
        }}
          textAlign='center'>
          {Object.keys(importSteps).map(function(key) {
            return <TabNavItem >{importSteps[key].name} {importSteps[key].stepNo}</TabNavItem>;
          }
          )}
        </TabNav>
        <div>{ this.renderStepItem() }</div>
      </Block>
    )
  }
}

UPDATE2: ImportItem component

import React, { Component } from 'react';
import { Block } from 'vcc-ui';

class ImportStep extends Component {
  render() {
    return (
      <Block>
        <h3>{this.props}</h3>
      </Block>
    )
  }
}

export default ImportStep;

Try return (<ImportStep nextStep={this.nextStep} />) (notice the added parenthesis, apply to each return statement) — nbokmans
– nbokmans, Commented Feb 4, 2019 at 15:57
Can you check to make sure that you transcribed the render method correctly for us? As written I would expect it to be a syntax error, because those curly brackets don't make sense in this context. — Nicholas Tower
– Nicholas Tower, Commented Feb 4, 2019 at 16:06
i have some constants before render. so i need those curlys. and importstep basically is very similiar to this. imagine <div>hello</div> is returned — Martin Fric
– Martin Fric, Commented Feb 4, 2019 at 16:12
@MartinFric Unfortunately, we're not able to debug your code by imagining it. With the information provided, all i can tell you is that either your main render method or your ImportStep's render method is returning an object as a child. And evidently its an object with a nextStep property on it. If you can provide the missing code (ie, both render methods), perhaps we can help narrow it down. — Nicholas Tower
– Nicholas Tower, Commented Feb 4, 2019 at 16:27

Jayendra Sharan · Accepted Answer · 2019-02-04 19:41:37Z

1

UPDATE

Use this.props.property in the render function. You can not use an object there in the ImportStep component.

Also, wrapping inside a <div> would be necessary when you have only one statement inside the return.

Wrap your this.renderStepItem() inside a <div></div>, and that should do.

Here is what your return statement should look like,

return (
  <div>{ this.renderStepItem() }</div>
)

See this example: https://codesandbox.io/s/q35699jj49

edited Feb 4, 2019 at 19:41

answered Feb 4, 2019 at 17:14

Jayendra Sharan

1,0186 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jayendra Sharan Over a year ago

In your ImportStep component, you are adding this.props in render method which is not correct, it's an object. Try with this.props.nextStep or other props which you are passing.

Jayendra Sharan Over a year ago

Also, my guess is that <div> is required if there is only one line inside render function's return, but now that you have given the complete render method, it wouldn't be necessary here.

Collectives™ on Stack Overflow

React returning Error decoder message message

UPDATE:

UPDATE2: ImportItem component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

UPDATE2: ImportItem component

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related