react js short Archives - Page 3 of 5 - Learn ReactJS & React Native With Me

Using states in class component Reactjs – Code Example

Akash Mittal
August 30, 2022

A component can maintain internal state data with this.state. When a component’s state data changes, the rendered markup will be updated by re-invoking render(). Here we are using states in class component…

View Post

Using Render() in ReactJS – Code Example

Akash Mittal
August 30, 2022

Render() in reactjs is used to attach components and JSX to the DOM. This helps in generating the UI for the website. Source: Reactjs Docs

View Post

React JS

Creating charts using google charts in ReactJS

Teresia Wachira
September 5, 2022

Introduction Data visualization is an important concept, especially in situations where statistics are involved. And google charts have made it easy. It is a great way to present data and…

View Post

contact us form in react js using tailwindcss

React JS

Contact Form in React Js using TailwindCSS

Teresia Wachira
September 5, 2022

Introduction Web application users have the chance to contact the developer or team of the web app by using a contact form. Typically, “contact us” pages employ email as the…

View Post

React JS

Creating calendars date-time pickers in Reactjs

Teresia Wachira
September 5, 2022

Introduction Adding a calendar or time input component has been made easy in React through the react date picker component. Date-time pickers(DTPs) help solve the confusion that occurs in date…

View Post

infinite loading in reactjs using react-infinite-scroll-component

React JS

Creating infinite loading & Scrolling in ReactJs

Teresia Wachira
September 5, 2022

Introduction Many applications use the infinite scroll functionality to display large number of records. For example, when you browse through the products on ecommerce like Amazon.com, you either get the…

View Post

React JS

Image Editing and Cropping in ReactJs

Teresia Wachira
September 5, 2022

If you have an application where a profile section is created, you most probably also asking for user’s photo for it. But different users have different phones and you end…

View Post

React JS

How to embed Youtube videos using ReactJs

Teresia Wachira
September 5, 2022

Introduction In React it is easy to embed and play YouTube videos in your application. You can do it in two ways. One includes using the Iframe tag while the…

View Post

Using Redux with React – A quick reference guide

Akash Mittal
October 9, 2022

In this article, we will learn about using Redux with React. We won’t engage much into theory and quickly set it up. This is a reference guide to get you…

View Post

Creating Search on JSON data in React JS over multiple key values

Akash Mittal
September 5, 2022

We use search in all the projects where there is long list of data. In most cases we get JSON data from server APIs and database. In this article we…

View Post

Creating constant resource file for making multilingual app in ReactJS

Akash Mittal
September 5, 2022

Few days back a student asked me about creating a separate file to keep dropdown values. This made me think of all the other developers and students who might be…

View Post

React.Children.only expected to receive a single React element child

Akash Mittal
September 5, 2022

One day I was working on my React-Native project and got this weird error, “React.Children.only expected to receive a single React element child“. Everything seemed perfectly alright with the code…

View Post

Converting HTML strings to JSX in React JS

Akash Mittal
September 5, 2022

React JS prevents loading html into the application. This is because they are prone to XSS (cross site script) attack. But if you trust the source and there is genuine…

View Post

Passing objects as props to JSX React

Akash Mittal
September 5, 2022

In React we get different needs like this one. Here we are trying to pass an object as props to JSX. You might want to do it in two ways.…

View Post

‘React’ must be in scope when using JSX react/react-in-jsx-scope

Akash Mittal
July 9, 2021

React js throws the error, ‘React’ must be in scope when using JSX react/react-in-jsx-scope, when either we forget to include React in our script or make a spelling mistake. This…

View Post

Create Pagination in ReactJS using Bootstrap

Akash Mittal
September 5, 2022

In this article I am going to show you how to create pagination in ReactJS using React Bootstrap pagination component. We will create the functionality for page numbers, next, previous,…

View Post

How to upload a file in React JS?

Akash Mittal
September 5, 2022

To upload a file in React Js, we can use FormData() api of javascript. We need to create a form with input file field and append the form value into…

View Post

ReactJS – Setting default baseurl in Axios

Akash Mittal
September 5, 2022

By setting the default baseurl in Axios, we don’t need to call the APIs with whole url. Only the endpoint will be required. The simplest procedure of doing this is…

View Post

React JS – How to return response in Async function?

Akash Mittal
September 5, 2022

Long story short, in order to return response in Async function, you either need a callback or use async/await structure. Case 1: Using callback – Callback is the function which…

View Post

Updating nested state properties in React JS

Akash Mittal
September 5, 2022

To update nested state properties in React JS, you can make a copy of state using library like Lodash and store it using setState or useState hook function with required…

View Post