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/> </>); }

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

Charles added the below line of code inside ReactDOM.render() method as follows:<TodoList items={data}>Which of the following options can be used to access the property 'items' in the component TodoList? [select two options]const TodoList = (props) =>{ return ( <h1>{props.items}</h1> ) }const TodoList = ({items}) =>{ return ( <h1>{items}</h1> ) }const TodoList = (props) =>{ return ( <h1>{this.props.items}</h1> ) }const TodoList = ({items}) =>{ return ( <h1>{this.items}</h1> ) }

function NameList(props) {    const myLists = props.myLists;    const listItems = myLists.map((myList) =>      <li>{myList}</li>    );    return (      <div>          <h2>Rendering Lists inside component</h2>                <ul>{listItems}</ul>      </div>    );  }  const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];   ReactDOM.render(    <NameList myLists={myLists} />,    document.getElementById('app')  );  export default App;

Question 9Fill in the blank: React has at least one component known as the __________ component.1 point

Jack has created a React application that contains the CourseList component with state courses as shown below.const CourseList = () => { const [courses,setCourses] = useState([ ]) const [success, setSuccess] = useState('')}He wants to retrieve the list of courses available for registration from the database within the CourseList component. He wants the courses data to be rendered immediately when the component is rendered. Which of the following code snippet helps Jack to achieve the above requirement?useEffect(() => { // asynchronous call },[]);useEffect(() => { // asynchronous call },[courses]);useEffect(() => { // asynchronous call },[courses,success]);useEffect(() => { // asynchronous call },[success]);