React JS 在单独的行中呈现列表数据

Question

I am facing an issue in React Js. I want to show names data in each separate row.

  const names = ['James', 'John', 'Paul', 'Ringo'[![\]][1]][1];

My Code:

return (
<div class="col-lg-8 bar-name">
  <div>
    {names.map(filteredName => (
      <li>
        {filteredName}
      </li>
    ))}
  </div>
</div>)

How can i use in div element? What should i do?

can anyone help me?

Answer 1

You need to add elements to want to be displayed alongside in the List tag. Example:

return (
<div class="col-lg-8 bar-name">
  <div>
    {names.map(filteredName => (
      <li>
        {filteredName} 
       <div>
        Ryan
       </div>
       <div>
        Eric
       </div>
      </li>
    ))}
  </div>

)