reactjs - React: Visually reset HTML select tag from onClick in sibling component -

i'm doing filter records conditionally displays 1 of 2 options: 1) list of record.jsx components, or 2) single noresults.jsx component.

the filter (filter.jsx) in component called recordsheader.jsx html select tag. has onchange event calls getrecords method, allows resulting records filtered according options in select tag.

goal: want have button in noresults.jsx sets filter 'all'. problem: can pass getrecords method , display them won't visually reset select tag 'all'.

i know can grab element jquery or vanilla , reset manually, works, i'd let react dom stuff me.

map of file structure:

- recordsdashboard.jsx   - savedrecordsview.jsx     - recordsheader.jsx       - filter.jsx     - noresults.jsx <-- click here , visully reset filter.jsx     - record.jsx 

without seeing code imagine savedrecordsview renders following in case of no results:

<recordsheader /> <noresults /> 

that means savedrecordsview shared 'parent' of 2 components. rewrite, pass callback via props noresults button can use trigger setting of filter all.

this callback update prop passed recordsheader , filter can re-render appropriate 'all' setting originally.