Components and State

 

1. What is Component in React?

A Component is a JS function that returns a JSX element.

1

const Welcome = () => <h1 className="message">Hello, User</h1>;

JSX

• The Component name should always start with a Capital Letter as react treats the components starting with lowercase letters as HTML elements.
• We can call the function with self-closing tags as shown above 
  <Welcome />
  .

2. What are the differences between class components and functional components?

Functional Components	Class Components
A functional component is just a JavaScript function that accepts props as an argument and returns a React element.	A class component requires you to extend from React.Component and create a  render  method that returns a JSX element.
There is no  render  method used in functional components.	It must have the  render  method for returning JSX.
It is also known as Stateless components	It is also known as Stateful components because they implement logic and state.
React lifecycle methods (componentDidMount, etc.) cannot be used in functional components.	React lifecycle methods can be used inside class components (componentDidMount, etc.).

3. Which directory is used to save the React Components?

Generally, React Components are saved inside

src/components/

directory.

4. What are controlled and uncontrolled Components in React?

In a Controlled Component, form data is handled by a React Component.

In an Uncontrolled Components, form data is not handled by a React Component. It is handled by the DOM itself.

5. What is meant by In React, everything is a component?

• In React, components are the building blocks of React applications. They divide the entire React application's UI into small, independent, and reusable pieces of code.

• React renders each of these components independently without affecting the rest of the application UI. Hence, we can say that, in React, everything is a component.

6. What is 

React.createClass

?

React.createClass

is a function that returns a Component class.

1

2

3

4

5

const MyComponent = React.createClass({

render() {

return <p>I am a component!</p>;

},

});

JSX

The

createClass

is deprecated. With ES6, React enables you to implement component classes that use ES6 JavaScript classes.

7. How many elements does a React component returns?

• In React, a component can return only a single element.

Example:

1

2

3

4

5

6

7

class Counter extends Component {

state = { count: 0 };

render() {

const { count } = this.state;

return <p>{count}</p>;

}

}

JSX

• However, we can use Fragments to return multiple elements. It groups a list of children without adding extra nodes to the DOM.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import { Component } from "react";

class Counter extends Component {

state = { count: 0 }

render() {

const { count } = this.state;

return (

<>

<h1>Count {count}</h1>

<button>Increase</button>

<button>Decrease</button>

<>

)

}

}

JSX

Collapse

8. What is the syntax for class Component?

1

2

3

4

5

6

7

import { Component } from "react";

class MyComponent extends Component {

render() {

return JSX;

}

}

JSX

The component name should always be in the pascal case.

9. What are stateless Components?

The Stateless Components are the components that don't have any state at all.

Example:

1

2

3

4

5

6

7

8

9

const List = props => {

return (

<ul>

{props.list.map(listItem => {

<li>{listItem}</li>

})

</ul>

)

}

JSX

10. What is the extends keyword in Class Component?

The

extends

keyword is used to inherit methods and properties from the

React.Component

.

Example:

1

2

3

4

5

6

7

import { Component } from "react";

class MyComponent extends Component {

render() {

return JSX;

}

}

JSX

11. What is meant by React JS props?

• Props stands for Properties.
• React allows us to pass information to a component using props.
• We can pass props to any component as we declare attributes for any HTML element.
• The components accept props as parameters and can be accessed directly.

12. How do we pass a property from a parent component to a child component?

We use props to pass properties and methods to the child component.

Example:

1

2

3

<ul className="list-container">

<UserProfile userDetails={eachUser} deleteUser={this.deleteUser} />

</ul>

JSX

13. What are the differences between props and state?

Props	State
Props get passed to the component, similar to function parameters	State is created and managed within the component, similar to a variable declared within the function
Props are used to pass data and event handlers down to the child components	State is used to store the component's data that changes over time
Props are immutable. A component cannot change the props	State should be immutable and updated using only setState method/useState hook

14. What is children prop?

Children is a prop (

this.props.children

) that allow you to pass components as data to other components, just like any other prop you use. Component tree put between component's opening and closing tag will be passed to that component as children prop.

There are a number of methods available in the React to work with this prop. These include,

• React.Children.map

• React.Children.forEach

• React.Children.count

• React.Children.only

• React.Children.toArray

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

const MyDiv = React.createClass({

render: function () {

return <div>{this.props.children}</div>;

},

});

ReactDOM.render(

<MyDiv>

<span>{"Hello"}</span>

<span>{"World"}</span>

</MyDiv>,

node

);

JSX

Collapse

15. What is Prop Drilling in React?

Prop Drilling is a process in which Props are passed from one Component to another Component that does not need the data but only helps in passing it through the tree.

16. What is the state in React?

• In React Class Components, the State is a JS object in which we store the component's data that changes over time.

• State represents the current state of the application at any instance of the component's life cycle.

• When the state object changes, the component re-renders.

17. How to update the state of a React Component?

We update state by calling

this.setState()

, this causes our component to re-render.

18. How to use state?

We can access the state using this.state.

1

this.state.count;

JSX

We update state by calling this.setState(), this causes our component to re-render.

1

this.setState((prevState) => ({ count: prevState.count + 1 }));

JSX

19. Why should we not update the state directly?

• If we try to update the state directly then it won't re-render the component.

1

2

//Wrong

this.state.message = "Hello world";

JSX

• Instead use 
  setState()
   method. It schedules an update to a component's state object. When the state changes, the component responds by re-rendering.

1

2

//Correct

this.setState({ message: "Hello World" });

JSX

20. What is the importance of the key prop in list items in React?

Keys help React identify which items have changed, are added or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

• To know more about keys, refer to Lists & Keys | Cheat Sheet.

21. How to display array elements using a map in the render method?

Example of displaying array elements using a map in the render method:

1

2

3

4

5

6

7

8

9

10

// projectsList is an array

render(){

return(

<ul>

{projectsList.map((projectDetails) => (

<li key={projectDetails.projectId}>{projectDetails.projectTitle}</li>

))}

</ul>

)

}

 

JSX