Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

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

22.02.2021 (👁4684)

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

 

 

 

 

Fehlermeldung

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

 

 

 

Lösung:

Bei der render() function von React muss man ein darstellendes <div> .. </div> HTML element um die einzelnen Ausgabe-Elemente legen

 

 

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

    }

 

 

 

 

Lösung:

Man muss ein Umfassendes Parent Element wie <div> um den inneren React Node erstellen

 

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