how to insert data in React js

Question

I am facing an issue with React JS, i want to do show all the data in a row not in a column.

What should I change in my code?

Working demo:

https://codesandbox.io/s/nostalgic-wood-9jrib?file=/src/App.js:0-355

react component

import React from "react";

export default function App() {
  const names =
    data &&
    data.length &&
    data.map(({ full_name }) => <p key={full_name}>{full_name}</p>);

  return <div className="row">{names}</div>;
}

Answer 1

p : is being used as paragraph so it will cover whole width by default, until unless you override with css

You can use,

// if you need more space you can apply class to span and add some padding-mrgin
// as per your need
<span key={full_name}>{full_name} {' '}</span>

in place of

<p key={full_name}>{full_name}</p>