Parse Error: Adjacent Jsx Elements Must Be Wrapped in an Enclosing Tag

ReactJS Adjacent JSX elements must be wrapped in an enclosing tag

Use fragment to wrap the two component. You are returning two elements simultaneously which causes that error.

<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? <>
       <a>Menu 2</a>
       <a>Menu 3</a>
     </>

   :

     ''
  }

You can also return an array instead of wrapping the component in one tag.

<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? [
       <a>Menu 2</a>
       <a>Menu 3</a>
     ]

   :

     ''
  }

Parse Error:Adjacent JSX elements must be wrapped in an enclosing tag(React.js )

Try enclosing the mapped elements either in a div or a React.Fragment

<List component="div" disablePadding>
  {menuSubTitele[0].map((item) => (
   <React.Fragment>
      <ListItemLink to='' primary={`${item}`} /><Divider light />
   </React.Fragment>)
  )}

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment -ReactJS

Each map item should have only one root element (https://reactjs.org/docs/lists-and-keys.html):

{blog.map((blogs, i) => (
  <div key={i}>
    <h2>{blogs.title}</h2> 
    <button>Delete post</button>
  </div>
))}

// with fragment if you don't want an extra element
{blog.map((blogs, i) => (
  <React.Fragment key={i}>
    <h2>{blogs.title}</h2> 
    <button>Delete post</button>
  </React.Fragment>
))}

I used array index as key but you should use a more consistent variable, like blog id.

How to fix the error: Adjacent JSX elements must be wrapped in an enclosing tag ? in react native

Put everything inside your render function into one tag, a div for example:

render() {
  return (
    <div>
      // your code
    </div>
  )
}

Or refactor your code to remove the adjacent tags:

render() {
    return (
      <View style={styles.page}>

        <Text style={styles.headerText}></Text>
        <BoxContainer style={styles.container1}>
           <View style={{flexDirection:'row'}}> 
           <View style={[{ width: "30", height :100, margin: 0,padding:'10', backgroundColor: "green" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
            />
          </View>
           <View style={[{ width: "70%", height :100, margin: 0, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON2"
            color="#00B0FF"
            />

          </View></View></BoxContainer>
          <!-- </View> Remove this! -->

Adjacent JSX Elements must be wrapped in an enclosing tag reactjs

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="Sample Image"                                     className={responsive_image__image}                                    style={responsive_image}                                 />                             </td>                  </tr>                 </tbody>                </table>                            <BrowserRouter>                <div>                        <Switch>                        <Route path="/berita/:id" component={BeritaView} />                     </Switch>                </div>            </BrowserRouter>        </div>)    });

Adjacent JSX elements must be wrapped in an enclosing tag - JSX tag already wrapped but keep omitting the error

1) You need to wrap your returning JSX into a single parent component, You can also use Fragments here as

CODESANDBOX

<>
  <h2>
    <span>Name</span>
    nbsp;
    <span>Age</span>
  </h2>
  <div>{dataList}</div>
</>

2) Since you are using const to declare data then, you should declare it at the starting of the function.

variables declared using let and const cannot be accessed before
they are declared.

  const data = [
    { name: "Daniel", age: 25 },
    { name: "John", age: 24 },
    { name: "Jen", age: 31 }
  ];

  //creating the ListItem
  const dataList = data.map((d) => (
    <>
      <span>{d.name}</span>
      <span>{d.age}</span>
    </>
  ));