Adjacent JSX Elements must be wrapped in an enclosing tag reactjs

Question

whats wrong in my code ??

error code call like this :

Adjacent JSX element must be wrapped in an enclosing tag

the code is error in element tag

const renderTodos = currentTodos.map((todo, index) => {
  return <table style={{ width: '100%', maxWidth: '100%', padding: '1%' }} >
    <tbody>
      <tr>
        <td style={{ width: '70%', padding: '2%' }}> 
              <span style={title}>
                 <b>
                   <Link to={`/berita/${todo.id}`} style={{ color: 'black' }}> 
                       {todo.title} 
                   </Link>
                   </b>
                   </span> 
                   <p> 
                    {todo.content=todo.content.replace(regex, '').substring(0, 150)} 
                     <a href="/">...Read More </a>
                         </p> 
                                <p style={content}>
                                     By <i> {todo.author ? todo.author : this.props.default} </i> 
                                </p>
                                <p style={content}> 
                                     <Moment date={todo.created_date} />  
                                </p>
                            </td>
                   <td style={{ width: '30%' }}>                                  
                                 <img 
                                    src={todo.link_image} 
                                    alt="" 
                                    className={responsive_image__image}
                                    style={responsive_image}
                                 /> 
                            </td>
                  </tr>
                 </tbody>
                </table>;
                
            <BrowserRouter>
                <div>    
                    <Switch>
                        <Route path="/berita/:id" component={BeritaView} /> 
                    </Switch>
                </div>
            </BrowserRouter>
    });

The error message is very self-explanatory and clear, and this question has been asked and answered heaps of times on this site. Wrap your components in a single root element or use a fragment. And at least google your error message before making a SO post, the answer is the very first result. — Jayce444, Sep 04 '18 at 05:55
Look at Leo's answer below, he's shown you how to wrap them in a div — Jayce444, Sep 04 '18 at 06:02

score 1 · Accepted Answer · answered Sep 04 '18 at 05:56

In React we must return single element. In your case you can wrap it with div or with React.Fragment

const renderTodos = currentTodos.map((todo, index) => {
  return (<div> 
   <table style={{ width: '100%', maxWidth: '100%', padding: '1%' }} >
    <tbody>
      <tr>
        <td style={{ width: '70%', padding: '2%' }}> 
              <span style={title}>
                 <b>
                   <Link to={`/berita/${todo.id}`} style={{ color: 'black' }}> 
                       {todo.title} 
                   </Link>
                   </b>
                   </span> 
                   <p> 
                    {todo.content=todo.content.replace(regex, '').substring(0, 150)} 
                     <a href="/">...Read More </a>
                         </p> 
                                <p style={content}>
                                     By <i> {todo.author ? todo.author : this.props.default} </i> 
                                </p>
                                <p style={content}> 
                                     <Moment date={todo.created_date} />  
                                </p>
                            </td>
                   <td style={{ width: '30%' }}>                                  
                                 <img 
                                    src={todo.link_image} 
                                    alt="" 
                                    className={responsive_image__image}
                                    style={responsive_image}
                                 /> 
                            </td>
                  </tr>
                 </tbody>
                </table>
                
            <BrowserRouter>
                <div>    
                    <Switch>
                        <Route path="/berita/:id" component={BeritaView} /> 
                    </Switch>
                </div>
            </BrowserRouter>
        </div>)
    });

if I want to enter a variable above the tag I get an error message unexpected token ... what is the solution for so that there is no error? — , Sep 04 '18 at 06:38
let see the code in the bottom of your comment .. thanks for help me — , Sep 04 '18 at 06:55
@NadziefHÿuga you just can't create variables in JSX. I think you should read through React documentation — Leo Odishvili, Sep 04 '18 at 06:58
is there another way if I want to routing by taking the ID from the API other than the above method? — , Sep 04 '18 at 07:02

Adjacent JSX Elements must be wrapped in an enclosing tag reactjs

1 Answers1