In order to display html from string you have to use dangerouslySetInnerHTML

export default function App() {
  const string = 'test data,cars,colors,demo';

  return (
    <div className="App">
      <h1 dangerouslySetInnerHTML={{ __html: `Hello ${string.replaceAll(',','<br>')}`}}></h1>
    </div>
  );
}

Assuming this is a React application you need to use dangerouslySetInnerHTML to add the new HTML to the page.

function Example() {

  const string = 'test data,cars,colors,demo';
  const html = `Hello ${string.replaceAll(',', '<br>')}</h1>`;

  return (
    <div className="App">
      <h1 dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );

}

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

I don't suggest you dangerouslySetInnerHTML. It introduces both security and performance issues, and even if you are working on learning project, you better avoid such an approach.

The reason why your code does not work, JSX does not magically convert string "<br>" into appropriate element (until there is dangerouslySetInnerHTML, sure).

But JSX can render arrays just fine. It allows us to split initial string into elements: string.split(', ') and then inject JSX's <br /> with the help of .flatMap()(think about it as if .join() could return array with additional elements in between elements of source array).

{
  string.
    split(', ').
    flatMap((el, index) => index ? [<br />, el]: el)
}

This approach is way more powerful than dangerouslySetInnerHTML since instead of simple BR you may use any JSX tree with React custom components, context and event handlers.

Another approach is to replace ', ' with newlines and apply CSS style white-space: pre-wrap(check white-space docs on all values available)