Is there a way to automatically trigger the onClick function of the first list item displayed when using the map function in React? I want it to show something, like just logging to the console upon triggering.
...
import React, { useState } from "react";
import ListGroup from "react-bootstrap/ListGroup";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import "./App.css";
const App = () => {
const [data, useData] = useState([
{ list: "appelllll" },
{ list: "ballllslsss" },
{ list: "cattsssssss" },
{ list: "dogssssss" },
{ list: "eggssss" },
{ list: "fatssssssssssssssssssss" },
{ list: "goatssssssssssssssss" },
{ list: "heloooooooooooooooooo" },
{ list: "ieloooooooooooooo" },
{ list: "jelooooooooo" },
{ list: "kelooooooo" },
{ list: "leooo" },
{ list: "melosdsadsado" }
]);
return (
<Container className="p-3">
<ListGroup
className="list_menu"
horizontal
style={{
overflowX: "scroll"
}}
>
<button>+</button>
{data.map((data, i) => {
return (
<div>
<ListGroup.Item
className="list_item"
key={i}
onClick={() => console.log(data)}
>
{data.list}
</ListGroup.Item>
</div>
);
})}
<button> > </button>
</ListGroup>
</Container>
);
};
export default App;...
Check out the working code here