React - assign component to array variables

Question

Is it possible to assign component to variable in React? I want something like this:

records[0] = {
  return(
    <Row key={'myValue'}>
      {myValue}
    </Row>
  )
}

records[0] = {
  return(
    <Row key={'mySecondValue'}>
      {mySecondValue}
    </Row>
  )
}

So then I can sort this array (records) based on other array and display.

Sure, but having a return there is nonsensical. So are the curly-braces. And two records[0]. But that's not how you'd do it IRL, you'd have an array of data, each element rendered by a component, and when it's sorted, it would be re-rendered. — Dave Newton
– Dave Newton, Commented Jan 12, 2018 at 16:01
Thanks for answer Dave! Yeah, there should be records[1] in second element of array. I also wrote it with "return", because thats how am I doing this while using map function. Sorry for mistakes. — ziggy
– ziggy, Commented Jan 13, 2018 at 15:19

dashton · Accepted Answer · 2018-01-12 16:19:15Z

1

Sure, you can just do :

const records = [
  <Row key={'myValue'}>{myValue}</Row>,
  <Row key={'mySecondValue'}>{mySecondValue}</Row>
]

answered Jan 12, 2018 at 16:19

dashton

2,7341 gold badge18 silver badges16 bronze badges

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

2 Comments

zmii Over a year ago

for bigger structures you can wrap components into parenthesis

ziggy Over a year ago

Thank you dashton and zmii!

Oleksiï Nikonov · Accepted Answer · 2021-05-28 10:31:57Z

0

there is two ways:

const Element = ({title}) => <h1>{title}</h1>;

//as a callback
elements[0] = ({title}) => <Element title={title}/>;

//and then invoke it like:
const anotherElement = () => <>{elements[0]('MyTitle')</>

//or
elements[0] = ({title}) => Element;
const anotherElement = () => <elements[0] title={'MyTitle'}/>

answered May 28, 2021 at 10:31

Oleksiï Nikonov

5,6366 gold badges48 silver badges76 bronze badges

Collectives™ on Stack Overflow

React - assign component to array variables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related