Is there a way to add more than one HTML element in a variable?

Question

I'm trying to make a variable called Characters to render three different buttons when it is clicked, for now, I've tried putting the three HTML elements in the same variable but it is not working as I think that's not the correct way to do it.

I've tried this:

     if (!hidden) {
    Characters = <button>Star</button>
<button>Toad</button>
<button>x</button>
    }

But it is not working.

import React, {useState} from 'react'
import mainImage from '../img/marioBrosMain.jpg'
import '../main.css'
import Box from '../pages/box.js'

function Main() {

  const [style, setStyle] = useState();
  const [hidden, setHidden] = useState(true)
  let Characters;

  const imageClick = (x, y) => {
    const newStyle = {
      position: "absolute",
    zIndex: 2,
    borderRadius: "2px solid red",
    border: "4px solid red",
    height: "50px",
    paddingLeft: "50px",
    left: `${x}px`,
         top: `${y}px`
          }
          setHidden(false)
    return newStyle
  }
  if (!hidden) {
Characters = <button>Star</button>
}
    return (
        <div id="frame">
          <div id="mainImage" style = {style}>
          {Characters}
          </div>
          <img src={mainImage} className="marioBros____image"  onClick={e => setStyle(imageClick(e.pageX, e.pageY))} />
        </div>
    )
}

export default Main

Does this answer your question? [Return multiple elements inside React.render()](https://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render) — Emile Bergeron, Jul 15 '21 at 14:09

score 1 · Answer 1 · answered Jul 14 '21 at 20:09

1

Yes you can wrap them in a div or a fragment:

Characters = (
    <>
        <button>Star</button>
        <button>Toad</button>
        <button>x</button>
    </>
);

Edit: Relevant documentation: https://reactjs.org/docs/fragments.html

answered Jul 14 '21 at 20:09

Oscar

132
5

score 1 · Answer 2 · answered Jul 14 '21 at 20:10

1

You need to wrap them in a fragment:

if (!hidden) {
    Characters = (
      <>
        <button>Star</button>
        <button>Toad</button>
        <button>x</button>
      </>
    );
}

answered Jul 14 '21 at 20:10

BenM

52,573
26
113
168

score 0 · Answer 3 · answered Jul 14 '21 at 20:10

0

const Characters = ()=>{
return(
   <>
    <button>Star</button>
    <button>Toad</button>
    <button>x</button>
   </>
   );
 };

answered Jul 14 '21 at 20:10

Will Evers

934
9
17

Is there a way to add more than one HTML element in a variable?

3 Answers3