Print element inside array

Question

I have some problem to print elements inside array.

This is my Code

const mapStateToProps = state => {
  console.log('antipasti', state.antipasti)
  return { antipasti: state.antipasti };
};

const ConnectedList = ({ antipasti }) => (
  <ul>
    {
      antipasti
        .filter(antipasto => !!antipasto )
        .map(antipasto => {
          console.log('antipasto', antipasto);
          <li>{antipasto.title}</li>
        })
    }
  </ul>
);

const List = connect(mapStateToProps)(ConnectedList);

export default List;

What I would to obtain:

I would to print the element inside state.antipasti, I have used the filter to not consider the undefined or null elements.

This console.log('antipasto', antipasto); prints:

antipasto {title: "Prova"}title: "Prova"__proto__: Object

so I have thought to use antipasto.title to obtain the title, but nothing appears.

I have imported this page, in another parent page only with

score 1 · Accepted Answer · answered Nov 13 '20 at 16:17

   {
      antipasti
        .filter(antipasto => !!antipasto )
        .map(antipasto => {
          console.log('antipasto', antipasto);
          <li>{antipasto.title}</li>
        })
    }

When you do antipasto => { <li /> } like that, you're not actually RETURNING anything to your .map function. In general, the React structure looks more like this

   {
      antipasti
        .filter(antipasto => !!antipasto )
        .map(antipasto => (<li>{antipasto.title}</li>)
    }

You may also be able to explicitly return inside the function, like Yury suggests in your comments, but that's not as common of a pattern and you'd only be doing it to support your console.log statement.

Print element inside array

1 Answers1