display list of buttons in react

Question

I've a react code as shown below in which I want to build a Timezonepicker. On clicking particular timezone, it should display all list related to it.

React Code:

const timezones = [moment.tz("America/Toronto").format('z'), 'PT', 'MT', 'CT', 'ET', 'AT', 'NT'];

const Helloworld = (props) => {
    return (
        timezones.map((timezone) => {
            <a onClick = {
                (e) => {
                    e.preventDefault();
                    props.onChange(timezone)
                }
            } > timezone < /a>
        })
    )
}

return(
    <VersionPageHolder>
        {
            <Helloworld onChange={(timezone) => {
                setSelectedTimezone(timezone);
            }}
            />
        }
        <div>{content.title}</div>
        <div>Version List : </div>
        <div>{
            renderElements(selectedTimezone)
        }</div>
    </VersionPageHolder>
)

The react code above doesn't show list of timezones (PT, MT, CT, ET, AT, NT). With the code above. At this moment, I am currently seeing:

timezone timezone timezone timezone timezone timezone

Add {brackets} around "timezone" in your Helloworld return, before the closing tag — gui3
– gui3, Commented Mar 18, 2021 at 18:56

Kishieel · Accepted Answer · 2021-03-18 18:59:13Z

1

To inject data inside jsx you should wrap them inside {}. Look closely to your map and repair it because you type only timezone without {}.

timezones.map((timezone) => 
    <a onClick = { (e) => { e.preventDefault(); props.onChange(timezone) } } > 
        { timezone } 
    </a>
)

edited Mar 18, 2021 at 18:59

answered Mar 18, 2021 at 18:50

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flash Over a year ago

I copied the code but nothing is getting displayed. Am I missing anything ?

Kishieel Over a year ago

@flash There was also another issue with brackets after arrow. I changed the code, try again :)

Helisson Nascimento · Accepted Answer · 2021-03-18 18:51:13Z

0

To inject a variable in JSX, you'll need use {}.

answered Mar 18, 2021 at 18:51

Helisson Nascimento

11 bronze badge

Comments

codemonkey · Accepted Answer · 2021-03-18 18:56:41Z

0

Two issues. One, as pointed out by others, you need curly brackets to use JS in JSX - {}. And two, your map function needs to return the a tag, which it currently does not. You can fix that by using the return statement or just dropping the curly brackets inside the map:

return (
  <>
    {
      timezones.map((timezone) => 
        <a onClick = {
            (e) => {
                e.preventDefault();
                props.onChange(timezone)
            }
        } > timezone </a>
    )
  }
  </> 
)

answered Mar 18, 2021 at 18:56

codemonkey

7,9755 gold badges28 silver badges46 bronze badges

Comments

Oscar Gauss Carvajal Yucra · Accepted Answer · 2021-03-24 17:26:01Z

Two issues one related to React and one related to Javascript.

First issue related aboud React: You should wrap the variables with curly braces {} to display the data, you can check this doc for more information. In your code it would be as follows:

} > {timezone} < /a>

Second issue related aboud Javascript: When you use Array.prototype.map() always try to return something. In your code it would be as follows with only parenthesis () instead of {}:

    timezones.map((timezone) => (
        <a onClick = {
            (e) => {
                e.preventDefault();
                props.onChange(timezone)
            }
        } > {timezone} < /a>
    ))

or with curly braces {} and return:

    timezones.map((timezone) => {
        return <a onClick = {
            (e) => {
                e.preventDefault();
                props.onChange(timezone)
            }
        } > {timezone} < /a>
    })

Collectives™ on Stack Overflow

display list of buttons in react

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related