import React, { Component } from 'react';  import { render } from 'react-dom';     function CustomInput(props) {    let callRefInput = React.createRef();       function handleClick() {      callRefInput.current.focus();    }       return (      <div>        <h2>Adding Ref to Class Component</h2>        <input          type="text"          ref={callRefInput} />        <input          type="button"          value="Focus input"          onClick={handleClick}        />      </div>    );  }  class App extends React.Component {    constructor(props) {      super(props);      this.callRefInput = React.createRef();    }       focusRefInput() {      this.callRefInput.current.focus();    }       render() {      return (        <CustomInput ref={this.callRefInput} />      );    }  }  export default App;

import React, { Component } from 'react';  import { render } from 'react-dom';    const TextInput = React.forwardRef((props, ref) => (    <input type="text" placeholder="Hello World" ref={ref} />  ));    const inputRef = React.createRef();    class CustomTextInput extends React.Component {    handleSubmit = e => {      e.preventDefault();      console.log(inputRef.current.value);    };    render() {      return (        <div>          <form onSubmit={e => this.handleSubmit(e)}>            <TextInput ref={inputRef} />            <button>Submit</button>          </form>        </div>      );    }  }  export default App;

How does React handle forms and form inputs?(2 Points)React provides its own <form> and <input> components for handling formsReact doesn't support forms or form inputsReact relies on native HTML form elements for handling formsReact uses controlled components where form data is managed by React state

import React, { Component } from 'react';  class App extends React.Component {   constructor() {        super();              this.state = { displayBio: true };        }        render() {            const bio = this.state.displayBio ? (                <div>                    <p><h3>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a team of experienced Java developers and trainers from multinational companies to teach our campus students.</h3></p>               </div>                ) : null;                return (                    <div>                        <h1> Welcome to JavaTpoint!! </h1>                        { bio }                     </div>                );       }  }  export default App;  To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.Output

What is a ref in React, and what are they used for? Select all that apply.Choose as many as you likeRefs provide a way to reference a DOM node or a child component directly.Refs are used for direct DOM manipulations such as focus management or procedural animations.Refs are used for state management and can replace more complicated libraries such as Redux.Refs provide a way to handle routing using HTML5 History API with pushState.Refs let you keep persistent values without causing the re-render

How do you define a functional component in React?class MyComponent extends React.Componentconst MyComponent = React.createComponentconst MyComponent = () => {}function MyComponent() {}Previous