[Solved]-How can I shuffle an array of objects on page render and map over the shuffled array without console warning of "two children with the same key"?-Reactjs

You could try to shuffle your array like this:

function shuffleArray(array) {
  return array.sort(function () {
    return Math.random() - 0.5;
  });
}

EDIT: You also should create a new object/array after shuffling. Otherwise React will not detect any change.

EDIT 2: Slightly improved implementation of your shuffle function:

function shuffleArray(array) {
  const newArray = [ ...array ];

  for (let i = newArray.length - 1; i > 0; --i) {
    const j = Math.floor(Math.random() * i);
    const temp = newArray[i];
    newArray[i] = newArray[j];
    newArray[j] = temp;
  }

  return newArray;
}

I have cleaned up my code some, particularly the useEffect. I'll post below. The problem was simpler than I realized. If your array.map has a parent div with the proper key, it is redundant to provide it for the children. Doing so brings a warning because it's interpreted as duplicate keys, not as children of the parent (which I incorrectly believed was required to collect the proper info for the children from the parent). I do suggest some deliberation over shuffling vs. randomizing for similar projects. Randomizing is bound to have repeats

import {scrollImages} from '../../Data/data'
import {scrollTestimonials} from '../../Data/data'



const HomeScroll = () => {
    function shuffleArray(array) {
        var i, j, temp;

        for (i = array.length -1; i > 0; i--) {
            j = Math.floor(Math.random() * i);
            temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    const [list, setList] = useState([])
    const [id, setId] = useState(0)
    const delay = 10000;

    useEffect(() => {
        const mountArray = shuffleArray([...scrollTestimonials])
        setList(mountArray)
        setTimeout(() =>
            setId((prevIndex) =>
                prevIndex === scrollImages.length - 1 ? 0 : prevIndex + 1
            ),
            delay
        );
        return () => {};
    }, [id]);

    return (
        <div className="wrapper">
            <div className="slider">
                <div className="slides"
                    style={{ transform: `translate3d(${-id * 2.5}%, 0, 0)` }}
                >
                    {scrollImages?.map((item) => (
                        <div className="widthWide" key={item.id}>
                            <img className="slide" src={item.img} alt="Slide" />
                        </div>
                    ))}
                    <div className="wrapperTest">
                        <div className="sliderTest">
                            <div className="slidesTest">
                                {list?.map((x, index) => (
                                    <div className="slideWrapper" key={x.id + index + x.name} >
                                        <div className="slideContent" >
                                            <div className="testimoneyWrapper" >
                                                <FontAwesomeIcon icon={faQuoteLeft} className="leftQuote" />
                                                <div className="slideTestimoneyWrapper">
                                                    <p className="slideTestimoney">{x.text}</p>
                                                </div>
                                                <FontAwesomeIcon icon={faQuoteRight} className="rightQuote" />
                                            </div>
                                            <div className="slideInfos" >
                                                <p className="slideName">{x.name}</p>
                                                <div className="slideInfo">
                                                    {x.site === "Yelp" ? 
                                                        <>
                                                            <FontAwesomeIcon icon={faYelp} size="2x" color="#0099CC" />
                                                            <p className="slideInfo1">Yelp</p>
                                                        </>
                                                    :
                                                        <>
                                                            <FontAwesomeIcon icon={faGoogle} size="1x" color="#EA4335" />
                                                            <p className="slideInfo2">oogle</p>
                                                        </>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default HomeScroll

in JS, you could use the library of Lodash, that has a function .shuffle(collection). Then use the shuffled data as model of your view.