javascript - Iteration over Set in React component won't render in JSX - Stack Overflow

admin管理员组

文章数量:1344310

I'm trying to iterate over a javascript Set() passed down in props inside a React ponent. I can't anything to render on the screen with the iteration in place:

 {selectedCity.forEach((key, value) => (
          return (
            <Row>
              <Col sm={12} md={6} mdOffset={4} lgOffset={4}>
                <Typography className="hide-mobile" h3>
                  TICKET PRICE FOR IN-STATE:
                </Typography>
                <Typography h3>{value.name}</Typography>
                <TicketPriceInput
                  onChange={e => {
                    setConcertDetails('price', e.target.value);
                    detectInputChange(e);
                  }}
                  value={price}
                  name="price"
                  isPriceChanged={isPriceChanged}
                />
                <OutPriceLabel className="hide-mobile">
                  <Typography h3>TICKET PRICE FOR OUT-OF-STATE:</Typography>
                  <Typography h3 bold className="hide-mobile">
                    {outLocationPrice()}
                  </Typography>
                </OutPriceLabel>

                <FootNote>
                  <Typography medium spaced className="hide-mobile">
                    *After the first 20 tickets anyone located in-state can
                    purchase tickets at the regular ticket price you set.
                  </Typography>
                </FootNote>
              </Col>
            </Row>
          );
        ))}

I've done this plenty of times with an Array or Object with map() or Object.keys() and it's worked.

I'm trying to iterate over a javascript Set() passed down in props inside a React ponent. I can't anything to render on the screen with the iteration in place:

 {selectedCity.forEach((key, value) => (
          return (
            <Row>
              <Col sm={12} md={6} mdOffset={4} lgOffset={4}>
                <Typography className="hide-mobile" h3>
                  TICKET PRICE FOR IN-STATE:
                </Typography>
                <Typography h3>{value.name}</Typography>
                <TicketPriceInput
                  onChange={e => {
                    setConcertDetails('price', e.target.value);
                    detectInputChange(e);
                  }}
                  value={price}
                  name="price"
                  isPriceChanged={isPriceChanged}
                />
                <OutPriceLabel className="hide-mobile">
                  <Typography h3>TICKET PRICE FOR OUT-OF-STATE:</Typography>
                  <Typography h3 bold className="hide-mobile">
                    {outLocationPrice()}
                  </Typography>
                </OutPriceLabel>

                <FootNote>
                  <Typography medium spaced className="hide-mobile">
                    *After the first 20 tickets anyone located in-state can
                    purchase tickets at the regular ticket price you set.
                  </Typography>
                </FootNote>
              </Col>
            </Row>
          );
        ))}

I've done this plenty of times with an Array or Object with map() or Object.keys() and it's worked.

• javascript
• reactjs
• set
• iteration
• jsx

Share Improve this question Follow asked Mar 4, 2021 at 21:20 Demian SimsDemian Sims 92111 gold badge1616 silver badges3636 bronze badges 2

• 1 after => on first line you have ` ( ..... )` it should be { .... } – Dominik Matis Commented Mar 4, 2021 at 21:21
• 1 the more significant problem is that forEach returns nothing (or rather undefined), so this won't render anything. The JS Set api doesn't have anything like map, so it looks like you have to use entries first and then map over that. Or convert the set to an array first and use map. – Robin Zigmond Commented Mar 4, 2021 at 21:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You have to use map. That's because map will return the ponent, but forEach will not. map is an array method, not available in Sets. but you can easily map over the set by using Array.from (which will convert the Set into an Array)

Array.from(selectedCity).map(...)

The Set.forEach() method iterates the Set's values, but doesn't return anything.

One option is to push the created elements to an array, and then return the array:

const renderSelectedCity = selectedSet => {
  const rendered = [];

  selectedSet.forEach(value => {
    rendered.push(
      <Row key={value.id}>
      // your JSX
      </Row>
    );
  });

  return rendered;
};

And then you can use it by calling the function, and supplying the Set:

{renderSelectedCity(selectedCity)}

The other option is to spread the Set to an array, iterate the array with Array.map() that would return a new array of rendered elements:

{[...selectedCity].map(value => (
  <Row key={value.id}>
  // your JSX
  </Row>
))}

You can also use Array.from() to create a JSX array from the Set:

Array.from(selectedCity, value => (
  <Row key={value.id}>
  // your JSX
  </Row>
))}

本文标签： javascriptIteration over Set in React component won39t render in JSXStack Overflow