{

How to Convert string with delimiter int array in react typescript?


This is a short tutorial on how to convert string to array in react example. It includes how to convert a string with a delimiter to an array using the split() function.

Suppose we have a string as an input.

var mystr="This is an string"

And output converted to Array

["this","is","an","string"]

In javascript, We have a string split() function. It is used to split the string into an array of words.

here is a syntax

string.split(delimiter)

by default, the delimiter is space, can include a comma(,), hyphen(-), and any character.

In real-time, We have an object coming from API.

this object contains the property of a string which we need to convert to an array to render in a component in react.

Let’s see examples with different delimiter spaces or commas in react.

How to convert string to an array with spaces in react javascript

This example converts strings stored in react state into an array.

  • store the string in react state
  • In the Render method, Convert string into an array with delimiter space using the split method.
  • Finally, render an array using map iteration as an ordered list on a component

Example:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'This is an string'
    };
  }

  render() {
    let str = this.state.name;
    var myarray = str.split(' ');
    console.log(myarray);
    let result = myarray.map(item => <li>{item}</li>);

    return (
      <div>
        <ul>{result}</ul>
      </div>
    );
  }
}

How to convert string with comma delimiter into Array in react

This is an example for converting fullnames into the array of first, last, middle names.

  • Let’s store the full names in string delimiter in react component state
  • Convert string into an array using string delimiter
  • Finally, prints the array of strings in to render using the map function
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'firstName, lastName, middleName'
    };
  }

  render() {
    let fullname = this.state.name;
    var names = fullname.split(',');
        let result = names.map(item => <li>{item}</li>);

    return (
      <div>
        <ul>{result}</ul>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Conclusion

In this example, Converted string into an array with space or delimiter using array split function in react with example

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React