#

Download:

Datei 1: Access_Export_Query.accdb

React: Split String in Render HTML

 

Aufteilen eines Texts nach Zeichen in einzelne Wörter mit React in der render() Function.

Dabei werden auch gleichzeitig die HTML Elemente aus dem .split(zeichen) erstellt mit der folgenden map(word=>html) funktion

 

<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>

 

 

 

 

React Code with .split(";").map..

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 >--------

}

 

 

 

Mobile

.