How to use onClick to pass data in React Hooks
P粉615886660
2023-08-31 13:43:40
<p>How do I pass data from the <code>blogItem.js</code> component to the <code>blogDetails.js</code> component when a blogItem is clicked? However, the blogItem component is imported in the Home.js component. Please tell me where should I add the click action? Can anyone share an example? </p>
<p>CodeSandboX link
https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876</p>
<pre class="brush:php;toolbar:false;">// App.js
import { BrowserRouter, Route, Routes, Switch } from "react-router-dom";
import Home from "./src/Home";
import BlogItem from "./src/blogItem";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/blogItem" element={<BlogItem />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
//Home.js
import "./styles.css";
import React, { useState, useEffect, useCallback } from "react";
import BlogItem from "./blogItem";
const Home = (props) => {
const [blogItem, setBlogItem] = useState(props);
useEffect(() => {
setBlogItem(props);
}, [props]);
return (
<div id="App">
<BlogItem />
</div>
);
};
export default Home;
// BlogItem.js
import "./styles.css";
import React, { useState, useEffect, useCallback } from "react";
const blogData = [
{
id: 1,
date: "25 Jan 2023",
photo: "https://picsum.photos/80",
heading: "Cypress setup blog",
blogDetails:
"Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
},
{
id: 2,
date: "22 Jan 2022",
photo: "https://picsum.photos/80",
heading: "React state details",
blogDetails:
"Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
}
];
const BlogItem = ({ id, date, photo, heading, blogDetails }) => {
const [searchResults, setSearchResults] = useState(blogData);
const [state, setState] = useState({ id, date, photo, heading, blogDetails });
const Columns = () => (
<div className="blogItems">
<div className="row">
<div className="blogArea">
{searchResults.map(({ id, date, photo, heading, blogDetails }) => (
<a key={id}>
<div className="blogImageSection">
<img alt="id" src={photo} />
<div key={id} className="dataArea">
<span className="dataDate">{date}</span>
<span className="tags">cypress</span>
<h3>{heading}</h3>
<p>
Best heading added here. The most relevant data added here.
Greatest of all time. Wont be a good idea play here always.
</p>
<a href="_blank" className="readmoreLink">
Read more →
</a>
</div>
</div>
</a>
))}
</div>
</div>
</div>
);
return <Columns {...state} />;
};
export default BlogItem;</pre>
<p>// BlogDetails.js</p>
<pre class="brush:php;toolbar:false;">import React from "react";
const BlogDetails = () => {
return (
<div id="App">
<div className="blogDetailsSection">
<div className="row">
<div className="individual-blogs">
<h2>ddd</h2>
<p>Blog details</p>
<pre>
<code>const data = []; data.push("soccer");</code>
</pre>
</div>
</div>
</div>
</div>
);
};
export default BlogDetails;</pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First, create browserRouter in
index.jsfile and remove it from app.js file and create BlogDetailscomponentCreate aRoute:Then you need to install the 'react-router-dom' package.
Import useNavigate in the
BlogItem.jsfile:import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); // 在函数组件内部使用Now you can add
onClickto theelementyou want to click on to redirect to/blogDetails, for example:Finally, in the BlogDetails.js file:
import { useLocation } from "react-router-dom"; const location = useLocation(); // 在函数组件内部使用You can access the passed data like this: