How to feed two children to React Component and use values?

Question

I currently have a project in which I am feeding two values into a react component for a modal window.

One of the children is the src for the file to be displayed. Another is a string that is used to reference which Array the src is being pulled from.

I want to pass two children into the component and use them independently for different purposes.

Here is me calling the component:

       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
         {accordionItems[activeSet].items[activeTrack].data}
         {activeString}
       </Modal>

Here is the inside of the component:

export default function Modal({ open, onClose, children, activeString}) {

  if (!open) return null
  return (
    <>
      <div style={MODAL_STYLES}>
        <div onClick={onClose}>Close Modal</div>
        {activeString}
        {children}      
      </div>
      </div>
    </>
  )
}

The result displays the children perfectly fine which is what is used to reference accordionItems[activeSet].items[activeTrack].data however the active string is not displayed but works okay if I only feed one parameter into the component (The active string).

Why is this?

Am I doing this correctly? I need to be able to access both!

Thanks

Answer 1

If you want pass activeString is a props. Pass it inline with Modal:

<Modal open={isOpen} onClose={() => setIsOpen(false)} activeString={activeString}>
  {accordionItems[activeSet].items[activeTrack].data} // => childrend
</Modal>