Passing multiple values as props

Question

How can I pass query to Story component

   function Story({data}) {
       return (<div></div>)
   }

   function Feedbacks({feedbackdata}) {
        const {query, feedbacks} = feedbackdata;
      
        return (
            <div>
                {feedbacks.length > 0 && feedbacks.map(feedback => <Story key={feedbacks.id} data={feedback}/>)}
            </div>
        )
    }

Answer 1

Just add it as prop?

and make sure that your Story function/class component handles that extra prop

   function Story({data}) {
       return (<div></div>)
   }

   function Feedbacks({feedbackdata}) {
        const {query, feedbacks} = feedbackdata;
      
        return (
            <div>
                {feedbacks.length > 0 && feedbacks.map(feedback => <Story key={feedbacks.id} data={feedback} query={query} />)}
            </div>
        )
    }

Answer 2

You add a prop to Story .

function Story({data, query}) {
  return (<div></div>)
}

Then pass in that prop like:

<Story key={feedbacks.id} data={feedback} query={query} />

See the docs for more info about props. You can add as many as you like!