Level 3
May 6, 2022
6
Level 1
how to get single post data from wordpress rest api to react using axios
I'm using the following to fetch a single post from the WordPress REST API.
import React, { Component } from 'react';
import axios from 'axios';
class Pages extends Component {
constructor() {
super();
this.state = {
post: [],
};
}
componentDidMount() {
axios.get('http://localhost:8080/tapline/index.php/wp-json/wp/v2/pages/2')
.then(response => {
this.setState({ post: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
{this.state.post.map(single => {
return(
<div>
<h1 >{single.title.rendered}</h1>
</div>
);
})}
</div>
);
}
}
export default Pages;
Is there a better/more straightforward way to render the post without mapping an array? or how to render single post data
Level 1
@folium Hi thanks for reply
For this any another way?
B'coz m work on like this way let me know this is correct?
const ids = [274];
axios.get(`http://112/training/wp-json/wp/v2/pages?${ids.map(id =>
`include[]=${id}`).join("&")}`)
1 like
Level 3
@Kl-Rahul i think this will help you out mapping ids...
{employees.map((employee) => (
<li key={employee.id} onClick={() => handleClick(employee.id)}>
{employee.name}
</li>
))}
const handleClick = (employeeId) => {
axios.get(`http://localhost:5050/employees/${employeeId}`).then((res) => {
setEmployees(res.data);
});
};
2 likes
Level 1
@folium Nice! this is right
One mor question How can i get API name in href tag
I can get {single.post_name} in the href tag ?
render() {
return (
<>
<ul className="navbar-nav mr-auto">
{
this.state.matrixmenu
.map(single =>
<li className="nav-item">
const name =
<Link className="nav-link" to="/{single.post_name} ">{single.title}</Link>
</li>
)
}
</ul>
</>
)
}
1 like
Level 3
Level 1
@folium I mean i try to get This {single.post_name} post name in the to="/{single.post_name} " tag. But this is return >>> https://prnt.sc/IMj0uVYZfyrb
Please or to participate in this conversation.