Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

React: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

 

 

Error message

 

Failed to compile

./src/components/Article.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (98:29)

   96 |                             //--< IsLoaded >--
   97 |                             <p>{this.state.idarticle}</p>
>  98 |                             <p>{this.state.Title}</p>
      |                             ^
   99 |
  100 |
  101 |                             //--</ IsLoaded >--

 

 

 

Solution:

In the render() function von React you have to place a performing <div> .. </div> HTML element around the individual output elements

 

 

Wrong React Code:

    render() {

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

        return (

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

            <div className="submit-form">

                {

                    this.state.loading ?

                        (

                            //--< IsLoading >--

                            <p>loading..</p>

                            //--</ IsLoading >--

                        )

                        :

                        (

                            //--< IsLoaded >--

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

                            <p>{this.state.Title}</p>

                            //--</ IsLoaded >--

                        )

                }

            </div>

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

        );

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

    }

 

 

 

 

Solution:

You need to create a comprehensive parent element like <div>  around the inner React Node

 

render() {

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

        return (

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

            <div className="submit-form">

                {

                    this.state.loading ?

                        (

                            //--< IsLoading >--

                            <p>loading..</p>

                            //--</ IsLoading >--

                        )

                        :

                        (

                            //--< IsLoaded >--

                            <div>

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

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

                            </div>

                            //--</ IsLoaded >--

                        )

                }

            </div>

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

        );

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

 

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de