Код реакции для отображения деталей не работает

Question

Я пытаюсь выполнить простой код реакции для отображения деталей -

html -

<div id="root"></div>

Это код реакции -

function User(props){
  return (
  <div>
    <h1>{props.user_details.firstname}</h1>
    <h1>{props.user_details.lastname}</h1>
    <h1>{props.user_details.email}</h1>
  </div>  
  );  
}

function Address(props){
  return (
  <div>
      <h2>{props.address_details.city}</h2>                   <h2>{props.address_details.state}</h2>
      <h2>{props.address_details.zip}</h2>
  </div>    
  );
}

function Bundle(props){
  return (
  <div>
    <User user_details={props.user} />  
    <Address address_details={props.address} /> 
  </div>  
  );
}

const info = {
  user: {
    firstname: 'Arjun',
    lastname: 'G',
    email: 'aaaaaaaaa',
  },
  address: {
    city: 'bbbb',
    state: 'ccccc',
    zip: '333333',  
  },
};

ReactDOM.render(
  <Bundle user={info.user} address={info.address} />, document.getElementById(root)
);

Показывает пустую страницу. Я дважды проверил и не смог найти ошибку. Я новичок в реакции и подумал о том, чтобы просмотреть документацию и кодировать код на стороне. Но я застрял здесь. Пожалуйста, помогите

Answer 1

Думаю, вам не хватает кавычек вокруг root

document.getElementById('root')

Вы должны получить сообщение об ошибке:

Целевой контейнер не является элементом DOM.

Создан A stackbliz для вашего решения