React: Split String in Render HTML

<p>Keywords: {this.state.keywords}</p>

<p>Keywords:

  {

    (this.state.keywords).split(";").map(keyword =>

    <a href={this.baseURL + "?k=" + encodeURI(keyword)}

    style={{ margin: '4px' }}>keyword</a>                                            

    )

 }

</p>

import React, { Component } from 'react';

import './Article.css';

import "bootstrap/dist/css/bootstrap.min.css";

export class Article extends Component {

    //--------< component: Article >--------

    //----< compontent >----

    static displayName = Article.name;

    baseURL = "/";

    constructor(props) {

        //-< react: parameter >

        super(props);

        //-</ react: parameter >

        //--< react: variables >--

        this.state = {

            idarticle: 0,

            loading: true,

            IDUser: "",

            title: "",

            TextContent: "",

            HtmlContent: "",

            Folder: "",

            Keywords: "",

            nImages: "",

            nVideos: "",

            nFiles: "",

            DtCreated: "",

            DtEdit: ""

        }

    }

    //--< component.events >--

    componentDidMount() {

        this.populateData(this.props.match.params.id);

    }

    //--</ component.events >--

    //----</ compontent >----

    //====< functions >====

    //*load data from web api

    async populateData(id) {

        //--------< populateData() >--------

        const response = await fetch('api/articles/' + id);   //*get web_data from web api as json-string

        const data = await response.json();             //*convert json to data

        //console.log("this.state=" + this.state);

        //console.log(this.state);

        this.setState(state => ({

            idarticle   :data.idArticle,

            iduser      :data.idUser,

            title       :data.title,

            textcontent :data.textContent,

            htmlcontent :data.htmlContent,

            folder      :data.folder,

            keywords    :data.keywords,

            nimages     :data.nImages,

            nvideos     :data.nVideos,

            nfiles      :data.nFiles,

            dtcreated   :data.dtCreated,

            dtedit      :data.dtEdit,

            loading: false

        })); //*refresh state of arcticles

        //--------</ populateData() >--------

    }

    //====</ functions >====

    //====< HTML >====

    //----< render >----

    render() {

        //--------< render(HTML) >--------

        return (

            //----< return >----

            <div className="submit-form">

                {

                    this.state.loading ?

                        (

                            //--< IsLoading >--

                            <p>loading..</p>

                            //--</ IsLoading >--

                        )

                        :

                        (

                            //--< IsLoaded >--

                            <div>

                                <p>IDArticle:{this.state.idarticle}</p>

                                <h3>{this.state.title}</h3>

                                <div>Folder:&nbsp;

                                    <a href={this.baseURL + "?f=" + encodeURI(this.state.folder)}>{this.state.folder}</a>

                                </div>

                                <p>Keywords: {this.state.keywords}</p>

                                <p>Keywords:

                                {

                                        (this.state.keywords).split(";").map(keyword =>

                                            <a href={this.baseURL + "?k=" + encodeURI(keyword)} style={{ margin: '4px' }}>keyword</a>                                            

                                        )

                                    }

                                </p>

                                <p>Date:{this.state.dtcreated}</p>

                                <div dangerouslySetInnerHTML={{ __html: this.state.htmlcontent }} />

                            </div>   

                            //--</ IsLoaded >--

                        )

                }

            </div>

            //----</ return >----

        );

        //--------</ render(HTML) >--------

    }

    //----</ render >----

    //====</ HTML >====

    //--------</ component: Articles >--------

}