How to pass data from mapStateToProps to parent component? - reactjs

Question

This is my component:
export default const NotesComponent = () => {
return notesList.map((noteProps) => (
<NewsCard {...notesProps} key={notesProps.id} />
))
}
Here is the place where i use this component:
const Notes = (props: NotesProps) => {
return (
<Container>
<NotesComponent />
</Container>
)
}
const mapStateToProps = (state) => ({
notesData: state.notes.notesData,
})
// and other code so mapStateToProps is working correctly
I don't know how to pass notesData to NotesComponent, so the NewsCard can read the data.

Answer 1

You can use connect high-order-function from react-redux and export the returned component:
import { connect } from 'react-redux'
// Redux state data notesData will be available in props
const NotesComponent = ({notesData}) => {
return notesData.map((noteProps) => (
<NewsCard {...noteProps} key={noteProps.id} />
))
}
const mapStateToProps = (state) => ({
notesData: state.notes.notesData,
})
export default connect(mapStateToProps)(NotesComponent)
Or, as NotesComponent is a function component, you can use react-hook useSelector instead of using connect to read redux data:
// in a function component
import { useSelector } from 'react-redux'
...
const notesData = useSelector((state) => state.notes.notesData)
Edit:
You can also connect parent component i.e. Notes with Redux and pass data to NotesComponent in props (to make NotesComponent a dumb or reusable component):
interface NotesProps {
notesData: write_your_type[]
// ...
}
const Notes = (props: NotesProps) => {
const { notesData } = props
return (
<Container>
<NotesComponent data={notesData} />
</Container>
)
}
const mapStateToProps = (state) => ({
notesData: state.notes.notesData,
})
export default connect(mapStateToProps)(Notes)
// it now exports enhanced (with redux data in props) Notes component
And, NotesComponent:
export default const NotesComponent = ({data}) => {
return data.map((item) => (
<NewsCard {...item} key={item.id} />
))
}