Skip to main content

Rendering HTML in React

In our previous React tutorial, we have explained how to Create React Select Dropdown List from API. In this tutorial, we will explain How to Render HTML in React.

There might be times when we have HTML content from external sources or WYSIWYG editors or via REST API to render using React. By default, it’s not possible in React due to security reason. It treats all content as string and thus all tags are visible on the page.

(more…)

Setup TinyMCE Editor in React

In our previous React tutorial, we have explained how to implement Autocomplete Search in React. In this tutorial, we will explain how to setup TinyMCE Editor in React .

We often need to use WYSIWYG html editor into our React project. The WYSIWYG HTML editors are used in web application that allows to preview the end results and source of content before saving or printing final content.

TinyMCE is an open-source WYSIWYG html editor to use in web applications. In this tutorial, we will explain how to integrate TinyMCE editor in React application.

We will use react tinymce-react package to use TinyMCE in React application.

(more…)

Build Autocomplete Search in React

In our previous React tutorial, we have explained how to create React Select Dropdown List from API. In this tutorial, we will explain how to create React Autosuggest Search using API.

The autosuggest search is a very user friendly feature of web application in which partial text search ebabled to display dropdown list of matching option values to select from.

In this tutorial, we will implement autosuggest search component to allow users to enter partial search text, an api request made to fetch data based on search text and display in dropdown list as suggested items to select fom suggested list.

(more…)

React Select Dropdown List from API

In our previous React tutorial, we have explained how to create react select dropdown. In this tutorial, you will learn to create React Select Dropdown List using REST API.

We will use react-select library to create an async select dropdown list by making http client request to API using axios package and loading response data to dropdown list. We will also use useState hooks to set and get selected values.

(more…)

Create React Dropdown Select

In our previous React tutorial, we have explained how to create simple form with validation in React. In this tutorial, you will learn to create React Dropdown Select List.

The drop-down select list is a list of items. The currently selected item is always displayed selected item from dropdown list.

You can easily create dropdown select list using react-select library. The libray offers feature to create multi-select, autocomplete with Ajax to load dynamic data in dropdown list. The react-select library also has dynamic features like search, filter, async loading, animated component, easy accessibility, and faster loading time.

(more…)