CODEWITHSUNDEEP
reactjsstate
user15251299
user15251299

Reputation:

How to pass the state value of a component to another component?

I'm adding a search bar to a page in my movie review application. The page displays all the review posts for one specific movie. The prop "reviews" contains all the existing reviews. I was stuck with figuring out how to pass the value of the state "filteredResults" from the useSearch hook to the ReviewPost component so that I could display the filteredResults data on the page.

Reviews Card:

export const Reviews = ({ reviews }) => (
  <div>
        {reviews.map((review, i) => (
          <div key={i}>{review}</div>
        ))}
  </div>
)

Search Bar for the Reviews:

export const ReviewSearchBar = ({ reviews }) => {
  const { onChange, textValue } = useSearch({ reviews })

  return (
    <div>
      <input
        onChange={onChange}
        value={textValue}
      />
    </div>
  )
}

Upvotes: 1

Views: 65

Answers (2)

Dani Alcal&#224;
Dani Alcal&#224;

Reputation: 252

I recommend using Redux to manage global state.

Upvotes: 0

Pavlo Demydiuk
Pavlo Demydiuk

Reputation: 132

You need to move const { onChange, textValue, filteredResults } = useSearch({ reviews }) to Parent component and from Parent pass props onChange, textValue to ReviewSearchBar and prop filteredResults to ReviewPosts component

Upvotes: 1

Related Questions