`Gatsby Build` Outputs Shuffled Array Objects Incorrectly

Question

I have a testimonial slideshow that is built using ReactStraps carousel components. Each slide is processed via a .json array that contains the testimonial authors name, title, their quote, and a headshot. A JS function then shuffles the order of the array as to ensure that the slides load in a random order for each pageload.

The issue is that once this project has been build, and his hosted onto a live server, the testimonial images get applied to the incorrect slides - but only when referenced within the html <img> elements.

Additionally, I am unable to replicate this issue using the gatsby develop terminal input. Instead it appears that this bug only occurs after gatsby build or hosted on a live server.

The .json file follows this structure:

[
    {
        "name": "First Name",
        "title": "First Job Title",
        "quote": "First quote.",
        "image": "/home/quotes/first_image.jpg"
    },
    {
        "name": "Second Name",
        "title": "Second Job Title",
        "quote": "Second quote.",
        "image": "/home/quotes/second_image.jpg"
    }
]

The testimonials component:

class Testimonials extends React.Component {
    render() {
        const json = this.props.testimonial;

        return (
            <Carousel controls={true}>
                {json.map(edge => (
                    <Carousel.Item>
                        <div>
                            <p className="testimonialText">{edge.node.quote}</p>

                            <p className="testimonialAuthor">{edge.node.name}</p>
                            <p className="testimonialAuthorTitle">{edge.node.title}</p>

                            // This outputs the correct image url
                            {edge.node.image}

                            // This outputs the image url from a different object in the array
                            <img src={edge.node.image} alt="" />    
                        </div>
                    </Carousel.Item>
                ))}
            </Carousel>
        );
    }
}

And the shuffle function:

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        array.sort(() => Math.random() - 0.5);
    }

    shuffle(json);

    <div>
        <Testimonials testimonial={json} />
    </div>
}

I've realized that removing the shuffle function will prevent the images from been processed out of order, since the object will only load in the order that they are output from the array.

Additionally, I have attempted to update the shuffle function to address the issue. Specifically, I've used the shuffle array function referenced in this thread. However, updating this shuffle function did not address the issue.

Deykun · Accepted Answer · 2020-03-11 22:38:00Z

You are trying to mutate immutable object (data should stay immutable in Gatsby) and I would check this first.

You can create and sort a new array, for example:

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
    }

    const sortedArray = shuffle(json);

    <div>
        <Testimonials testimonial={sortedArray} />
    </div>
}

You should be aware that by definition Gatsby in static HTML will generate one shuffled result. You can put default order in useState and shuffle it in useEffect:

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;
    const [testimonial, setTestimonial] = useState( json )

    useEffect(() => {
      function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
      }
      setTestimonial( shuffle(testimonial) )
    }, [])

    <div>
        <Testimonials testimonial={testimonial} />
    </div>
}

It is one of the possible solutions, It will render that component twice (first time for static HTML and second time when JS will be ready), an alternative is to use useState( null ) and hide <Testimonials> for it, it will render slider once but it will be not available in static HTML part.

Also running npm run build and gatsby serve should run the build version on localhost:9000.

Collectives™ on Stack Overflow

`Gatsby Build` Outputs Shuffled Array Objects Incorrectly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related