What is the output of the following code snippet?function ParentComponent() { const data = { name: "John Doe", age: 30 }; return ( <div> <ChildComponent data={data}> <h3>This is a child element</h3> </ChildComponent> </div> ); } function ChildComponent(props) { const { name, age } = props.data; return ( <div> <h2>Name: {name}</h2> <h2>Age: {age}</h2> {props.children} </div> ); }AName: John Doe Age: 30This is a child elementBName: undefined Age: undefinedThis is a child elementCName: null Age: nullThis is a child elementDSyntax error

react, Props are used to send data from one component to another, a team of developers created a Student component having properties that are: Name, roll number, College, GPA Now, these properties are needed to be used in another component, bypassing props, finding the valid syntax the team must use, so all of them render and display only the value in separated lines on screen- A function Student(props) { return ( <> <div> (props.Name}<div/> <div>{props.RollNumber} <div/> <div>{props.College}<div/> <div> (props.GPA)<div/> </>); } B function Student(props) { return ( <> <div className="props.Name"><div/> <div className="props.RollNumber"><div/> <div className="props.College"><div/> <div className="props.GPA"><div/> </>); }

Observe the below code snippet and select the correct option to pass state from Parent component to Child component:​​​​​​​const Parent = () => {  const [data, setData] = useState(0);  return (    <>      <h1>Parent Component</h1>    </>  );};export const Child = ({counter}) => {  return (    <>      <h3> Child component</h3>    </>  );};export default Parent; ​​​​​​​ <Child {data} /> and {props.data}<Child counter = {data} /> and {counter}<Child data = {counter} /> and {this.props.counter}<Child data = {this.state.counter} /> and {props.counter}

Which component property is used to pass data from a parent component to a child component?statepropsdatachildrenPrevious

Select the incorrect statements regarding React Components. Components returns JSX elements Helps in code re-usability Components cannot be nested All the given options are correct

What will be the output of the following code snippet?import React, { useState, useEffect } from "react";import axios from "axios";function App() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => {   async function getUsers() {     const result = await axios.get("https://jsonplaceholder.typicode.com/users");     setUsers(result.data);     setLoading(false);   }   getUsers(); }, []); return (   <div>     {loading ? (       <div>Loading...</div>     ) : (       users.map((user) => <div key={user.id}>{user.name}</div>)     )}   </div> );}export default App;AIt will display the list of users fetched from the APIBIt will throw an errorCIt will display a loading spinnerDIt will not display anything