React Reveal not working for array of data

Question

Can't use React Reveal on array of data with .map() to produce effect from documentation.

https://www.react-reveal.com/examples/common/

Their documentation gives a nice example

   <Fade left cascade>
         <div>
            <h2>React Reveal</h2>
            <h2>React Reveal</h2>
            <h2>React Reveal</h2>
         </div>
    </Fade>

I want to produce the same CASCADE effect with my data

<React.Fragment>
  {projects.filter(project => project.category === category)
    .map((project, index) => {
           return (
               <ProjectThumb key={index} project={project} 
               showDetails={showDetails}/>
        )
    })}
</React.Fragment>

The effect I'm getting is that the entire ProjectThumb component list fades in in one group, I need them to fade in individually and as i scroll. Thanks in advance.

score 3 · Answer 1 · edited Dec 31 '19 at 06:37

3

Pass react-reveal props to your React component. It will work.

<Fade left cascade>
         <div>
            {
              projects
                .filter(project => project.category === category)
                .map((project, index) => (
                     <ProjectThumb key={index} project={project} showDetails={showDetails} />
                ))
            }
         </div>
</Fade>

In your ProjectThumb.js

const ProjectThumb = props => {
   return <Whatever {...props}>{...}</Whatever>
}

edited Dec 31 '19 at 06:37

amdev

6,703
6
42
64

answered Dec 31 '19 at 06:16

Jisu Lee

31
2

Specifically prop with key "style" and value of type object. You can assign it as style={props.style}. Since there is no type definitions for react-reveal, you can use "object" type. – VityaSchel May 14 '22 at 16:20

React Reveal not working for array of data

1 Answers1