Content not rendering in conditional statement

So currently i have a react component. I have declared an array which contains a series of objects for some sample data. As the initial state for 'currentStep' is 0, I expect the <div>Screen 1</div> to render, however, all i get is a blank screen.

<div>Screen 1</div>

Any ideas?

import React, Component from 'react';

/**
* sample data to pass through
*/

const contents =
[
title: 'First Screen', step: 0, children: <div>Screen 1</div> ,
title: 'Second Screen', step: 1, children: <div>Screen 2</div> ,
title: 'Third Screen', step: 2, children: <div>Screen 3</div> ,
];

class Wizard extends Component
state =
currentStep: 0,


Content = () =>
const currentStep = this.state;
contents.map((content) =>
if (content.step === currentStep) return content.children;
return null;
);


render()
return (
<div>this.Content()</div>
);



export default Wizard;


2 Answers
2

You need to return your map in Content. Right now you are returning nothing. For ex:

Content = () =>
const currentStep = this.state;
return contents.map((content) =>
if (content.step === currentStep) return content.children;
return null;
);



Your Content function isn't actually returning anything, but your map function is. If you return contents.map(...), then you should get what you are expecting.

Content

return contents.map(...)

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.