Facing Issue in rendering Components in React challenge

Japanese 日本語 JavaScript
1

Hello everyone,
I’m currently working on the Render a Class Component to the DOM
challenge in the React section. I am facing an issue while trying to render components as children within another component.
Here’s my code:

class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (


Types of Food:


{/* Render Fruits component /}
{/ Render Vegetables component */}

);
}
}

ReactDOM.render(, document.getElementById(‘challenge-node’));

The challenge requires me to render the Vegetables component after the Fruits component. However, I am encountering an error message in the console: “act(…) is not supported in production builds of React, and might not behave as expected.”
I have ensured that the components are correctly imported.
Could someone please help me understand why I’m getting this error and how to resolve it? Any guidance or suggestions would be greatly appreciated!
Thank you in advance for your assistance.

2

pass the <TypesOfFood /> component as the first argument to ReactDOM.render() . This component will be rendered to the DOM. The second argument, document.getElementById('challenge-node') , specifies the target DOM node where the component should be rendered

3

Its still not Working
error:
// running tests
The TypesOfFood component should render the Vegetables component after Fruits.
// tests completed
// console output
act(…) is not supported in production builds of React, and might not behave as expected.