react get data from url code example
Example 1: using componentdidmount with fetch
Component with Data
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
isLoaded: false,
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(result => {
this.setState({
isLoaded: true,
items: result
});
});
}
render() {
const { items } = this.state;
if (!isLoaded) {
return <div>Loading ... </div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.id}>
<h3>{item.title}</h3>
<p>{item.body}</p>
</li>
))}
</ul>
);
}
}
}
Fetching Data - Ha
Example 2: get data from url using react
this.props.match.params.id
Example 3: get data from url react
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
const AppRouter = () => (
<BrowserRouter>
<Route path='/:parameter1/:parameter2/:parameter3' render={(props) => <App {...props} />} />
</BrowserRouter>
);
const App = (props) => {
const { parameter1, parameter2, parameter3 } = props.match.params;
return (
<div>
First: {parameter1} <br />
Second: {parameter2} <br />
Third: {parameter3} <br />
</div>
);
};
ReactDOM.render(<AppRouter />, document.getElementById("root"));
Example 4: using componentdidmount with fetch
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ data }));
}
...
}
export default App;