Issue
i am a new in react framework. what i want to do is to create array of JSX elements (Components) for examples:
import Intro from '../Introduction/Intro';
import Skills from '../Skills/Skills';
export const SECTIONS = [<Intro/>, <Skills/>]
const SomeComponent = () => {
const handler = () => {...}
return (
<div className={classes.container}>
<div className={classes.fields}>
{SECTIONS.map((section, i) => {
return <Fragment key={i}>{section /* for each element i want also pass prop */ }</Fragment>
})}
</div>
<div className={classes.check}>...</div>
</div>
)
}
so i want to pass handler function to each element in my array
(<Intro foo={handler}/>)
Is it possible to do this?
Solution
Yes, you can do this:
export const SECTIONS = [Intro, Skills]
const SomeComponent = () => {
const handler = () => {...}
return (
<div className={classes.container}>
<div className={classes.fields}>
{SECTIONS.map((Section, i) => {
return <Fragment key={i}><Section foo={handler}></Section></Fragment>
})}
</div>
<div className={classes.check}>...</div>
</div>
)
}
Answered By - Ali Sattarzadeh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.