Category: React

How to pass props to state variable

How to pass props to state variable to state variable inside a functional component I want to pass products ariable to <SearchBox > component. Your search box component is like this

Read more

Conditional Rendering in React JS

If you wan to use if statement

Read more

React State

Props are immutable and once the component is rendered you can not change the value of the Prop So how to do change the UI values ? This is where React sate comes into play When the state object changes, the component re-renders ´╗┐How to create state object´╗┐

Read more

Validate React Prop

You can validate the property of a React component using the built in PropTypes

When i pass the following props to the component When there are validation errors they will be shown in the console as warning message Warning: Failed prop type: Invalid prop rowsperpage of type string supplied to Setting, expected number.

Read more

Defaults Props in React Js

You can assign default values for properties of your components. When you do not supply prop values externally to the component default values are applied

You can Setting.defaultProps object is used to define the default properties. defaultProps is declared outside of the class or we call them instance of the class This is your […]

Read more

React Props

In simple terms, you can use the props to pass variables to child components So first, you define the child element which is able to accept the prop values

Now, Task child element can accept the prop named title In your parent component

You are rendering the Task element by passing the value […]

Read more

How to use axios in your React App

First install the axios in your working directory

Get Request We are using componentDidMount life time hooks to call the axios.get to get JSON data. Retrieved data will be put in state and will be used inside the the render() function

Read more

How to run your first React code

Read more

Create Stateless functional component for ReactJS

This is another way to create React components. Stateless functional component is JS pure functions which has no state. This is the product component which I have created using createReactClass method

Now we will see how we can convert above code to stateless function component So this is the syntax for stateless function is […]

Read more

ES6 Class component for React

You can use ES6 to create ReactJS component. We will create the following code in ES6 syntsax

You can see the following code snippet which I have rewritten with ES6 syntax. Here I am extending the React.component to create your Product component. You can see it at line 4

Read more