React content rendering based on map output not working

Question

I have a component which is going to rely on the results of an array.map to determine it's output. In this case the array contains an element called "name", and one of the names is 'Welcome.' What needs to happen is the component spits out a particular div for the 'Welcome' instance and different content (an Accordion component) for every other instance. I've used a ternary operator in the render which I'm then calling in the return, but it's outputting the same text for every instance of the component (the text specified for only the 'Welcome' instance.) I can't for the life of me figure out what I'm doing wrong. Here's the code:

export default class Back extends React.Component {

constructor(props) {
 super(props)
}

render() {

 const CheckDomains = this.props.totaldomains.map((domain, index) => {    
    <div>
    {
      domain.name === 'Welcome' ?
        <div>This is welcome text.</div>
      :
        <div>This is accordion text.</div>
    }
    </div>
   )
 });


 return(
      <div className='back'>
        {CheckDomains}
      </div>
     );
   }
 }

Possible duplicate of Map function not return item in render reactjs? — Amanshu Kataria
– Amanshu Kataria, Commented Mar 2, 2018 at 13:33

Stretch0 · Accepted Answer · 2018-03-02 13:14:27Z

1

You need to return something in your map callback function.

Like so:

const CheckDomains = this.props.totaldomains.map((domain, index) => {    
  return  (
      <div>
          {
            domain.name === 'Welcome' ?
              <div>This is welcome text.</div>
            :
              <div>This is accordion text.</div>
          }
        </div>
    )
});

answered Mar 2, 2018 at 13:14

Stretch0

9,40215 gold badges95 silver badges162 bronze badges

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

4 Comments

CHays412 Over a year ago

That solution is putting outputting both divs on top of each other on every instance of the component.

Stretch0 Over a year ago

Can I see the JSON of your this.props.totaldomains?

Stretch0 Over a year ago

@CHays412 I have tried to replicate it in this sandbox env and it is working - codesandbox.io/s/z3jp1lxv9p

CHays412 Over a year ago

awesome I will check this out! Thank you so much.

Collectives™ on Stack Overflow

React content rendering based on map output not working

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related