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

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

Suppose we have a string as a 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 array of words.

here is an syntax

string.split(delimiter)

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

In realtime, We have a object coming from API. this object contains property of a string which we need to convert to array to render in a component in react.

Let’s see examples with different delimiter space or comma in react.

How to convert string to array with spaces in react javascript

This example convert string stored in react state into an array.

• store the string in react state
• In Render method, Convert string into array with delimiter space using split method.
• Finally render an array using map iteration as 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 array of first,last,middle names.

• Let’s store the full names in string delimiter in react component state
• Convert string into array using string delimiter
• Finally prints the array of strings in to render using 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 array with space or delimiter using array split function in react with example