ReactJS：子组件中未定义道具，我无法通过父组件传递道具参数

Question

I'm learning React and I have a problem trying to read my props in a child component.

The child component is:

const HelloWorldApp = ( props ) => {
  console.log(props);
  return (<>
    <h2> {props} </h2>
    </>
  );
}
export default HelloWorldApp;

The parent is:

import React from 'react';
import {createRoot} from 'react-dom/client';
import HelloWorldApp from './FirstApp';
import { SecondApp } from './SecondApp';
import './styles.css';


createRoot(document.getElementById('root')).render(HelloWorldApp());

createRoot(document.getElementById('raiz')).render(SecondApp());

1) What is the problem? 2) How can I pass props from the parent to the children component?

Answer 1

I think the problem is in the render function. You need something like this:

createRoot(document.getElementById('root'))
     .render(<HelloWorldApp />);

Answer 2

1. In react, you don't need to render all the components in separate CreateRoot..

2. render your child component with props inside the parent component

The parent Component

import React from 'react';
import {createRoot} from 'react-dom/client';
import HelloWorldApp from './FirstApp';
import './styles.css';


createRoot(document.getElementById('root')).render(<HelloWorldApp data="propsData" />);

The child Component

const HelloWorldApp = ( props ) => {
  console.log(props);
  // {data: "dummyData"}
  return (<>
    // you can't able to render object inside the jsx
    <h2> {props.data} </h2>
    </>
  );
}
export default HelloWorldApp;

Answer 3

The structure React program is on constantly changing over the time, whereby i recommend you use command npm create-react-app to have the latest standards of programming in that framework. Only one createRoot is necessary in React renderize DOM, and i recommend you receive parameters with destructuring in child component, the parameters must been passed in JSX tags as attributes