Functional Components or stateless components are the most widely used type of components with a basic syntax of JavaScript Functions that return the JSX code or the HTML code.They are called as stateless components because they accept the data and display it accordingly and are mainly responsible for the rendering of the UI.Exampleimport React from ‘react’; const App=()=>{    return (                TutorialsPoint          ) } export default AppOutputClass based or stateful Components are the ES6 classes that extend the component class of the react library. They are ... Read More

In this article, we are going to see how to handle the forms properly in a React application.Handling Forms is one of the most crucial parts needed while building a real-world React application. It is all about taking the inputs from the user, validating it and displaying if there are errors in the data submitted by the user.ExampleIn this example, we will build an Information Page that takes the information from the user, validates it and displays the result accordingly.Here, we have App.js as the parent component of the Details.js component.Details.jsimport React, { useState } from 'react'; const Details ... Read More

While building a real-world application, the most important thing that a developer should know is how to properly debug the React application. There are many ways to debug our React application and some of the proven methods are explained below −Using Code LinterTools like ESLint help to write better and clean codes, as it follows proper guidelines which prevent errors at the time of developing the codes.Using React Developer ToolsThis tool comes very handy while debugging ReactJS applications, as it allows to navigate through the Component Tree and allows to take a look at the state or the props or ... Read More

In this article, we are going to learn how to define custom hooks in ReactJS.All the rules and usage guidelines are the same as that of the predefined ReactJS hooks like −Call Hooks at the Top LevelCall Hooks from React Functions onlyExampleIn this example, we will build an input validator application that will display some text based on the user-defined conditions in the custom hook.App.jsximport React from 'react'; import useForm from './CustomHook'; const App = () => {    const input = useForm();    return (                   {input.valid ? ... Read More

In this article, we will learn how to provide dynamic class names to our React application.StepsNpm run ejectThis command will allow us to customize the configurations and the options that were predefined when we run the command of create-react-app. It is a one-sided operation that can’t be undone later on.Change Webpack configurationsWe need to configure the webpack loaders so as to enable css-loader which will then provide dynamic naming to our classes.Set the configurations as −{    test: /\.css$/,    loader: 'style-loader' }, {    test: /\.css$/,    loader: 'css-loader',    query: {       modules: true,     ... Read More

In this article, we are going to see how to access the data without passing it through every parent component in the class-based component.Context APIs are used to set the global data and this data can now be accessed in any of the children's components without the need to pass it through every parent component.ExampleSuppose there are three components namely, A, B and C. A is the parent component of B and B is the parent component of C. So, our component structure is as follows − A→B→C.We have defined some data in A and want to handle it in ... Read More

In this article, we are going to see how to conditionally render a component based on some conditions in a React applicationIn ReactJS, we can render only the desired components based on certain given conditions by using the if-else statements or by using the logical && operator of JavaScript. When the provided condition is satisfied, then React will match the UI and update it accordingly.Using if-else conditionsExampleIn this example, we will build a React application that has an App component as a parent component which will conditionally re-render the Form component and update the UI accordingly.App.jsximport React, { useState } ... Read More