You can do it in two ways:

First:

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

Second: Directly write the map function in the return

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

In your first attempt you are trying to return an array of JSX elements from your <Todo /> component. This is not allowed, all JSX returned elements must have a single parent (which is why your second attempt worked). Therefore, the solution is to wrap your elements in a fragment (<>{...}</>) this gives the array a parent. Furthermore, you must specify a unique key prop for each item in a rendered array.

const DUMMY_TODOS = [
  'Learn React',
  'Practice React',
  'Profit!'
];

function App() {
  return (
      <ul>
        <Todo list={DUMMY_TODOS}/>
      </ul>
  );
}

function Todo(props) {
  return <React.Fragment>
    {props.list.map(todo => <li key={todo}>{todo}</li>)}
  </React.Fragment>;
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>