set first box clicked as a default at the first load-CodePudding

Im new in reactjs and I create a list of card by mapping in reactjs but I want my first card be clicked as a default at the first load what can i do for this code.

<div className="d-flex">
            {data && data.length > 0
              ? data.map((item, index) => {
                  return (
                    <>
                      <div className="box-stock" onClick={() => selectData(item)}>
                        <div className="top-stock skewed p-5">
                          <h1>{item.symbol}</h1>
                          <strong className="text-center">
                            <span> (0.25)</span>
                            {item.stockNum}
                          </strong>
                          <Label className="text-center">
                            EPS:<span className="text-white">{item.EPS}</span>
                          </Label>
                          <Label className="text-center">
                            P/E:<span className="text-white">{item.PE}</span>
                          </Label>
                        </div>
                      </div>
                    </>
                  );
                })
              : 'no data'}
          </div>

CodePudding user response：

You can use useEffect hook to run program once it renders. Here, in useEffect pass empty array as a dependency so, that it runs only once.

useEffect(() => {
  selectData(data[0])
}, [])

CodePudding user response：

You can add click event on first load using javascript. The button will trigger the event on first load and you will get your first card clicked. Here is the code:

document.getElementsByClassName("box-stock").click()