The above UI is Context Task. In this example we have four components and one context store. Home is parent component and all other i.e personal, login & address are child components. In Home component we will call api and fetch user details, That user information we will store in context and then wherever it is required we will use that data from context.
1) Home Component
import React from "react";
import PersonalDetails from "./PersonalDetails";
import Address from "./Address";
import Login from "./Login";
import axios from "axios";
import myContext from "./ContextTask";
class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
userData: []
}
}
componentDidMount(){
axios.get('https://randomuser.me/api/?results=1').then((res)=>{
console.log(res.data.results);
this.setState({
userData:res.data.results
})
},()=>{
alert('Error while fetching the data');
})
}
render() {
return (
<div className="container mt-5">
<div className="row">
<div className="col">
<div className="card">
<div className="row">
<div className="col-4">
<img src={this.state.userData.length >0 ? this.state.userData[0].picture.medium : ""}
alt="Burger" height="500px" width="100%"/>
</div>
<myContext.Provider value={this.state.userData}>
<div className="col-8">
<div className="row">
<div className="col">
<PersonalDetails />
</div>
</div>
<div className="row mt-5">
<div className="col-6">
<Address/>
</div>
<div className="col-6">
<Login/>
</div>
</div>
</div>
</myContext.Provider>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Home;
2) Create Context Store
import React from "react";
var myContext = React.createContext();
export default myContext;
3) Address Component
import React, { Component } from 'react';
import Table from './Table';
import myContext from './ContextTask';
class Address extends Component {
constructor(props) {
super(props)
this.state = {
header:['City','State','Country']
}
}
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header">
<h2>Address</h2>
</div>
<div className="card-body">
<myContext.Consumer>
{(contextData)=>{
console.log(contextData)
return contextData.length > 0 ?
<Table header={this.state.header}
data = {[contextData[0].location.city,contextData[0].location.state,contextData[0].location.country]}
/> : <div></div>
}}
</myContext.Consumer>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Address;
4) Login Component
import React, { Component } from 'react';
import Table from './Table';
import myContext from './ContextTask';
class Login extends Component {
constructor(props) {
super(props)
this.state = {
header:['UserName','Password']
}
}
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header">
<h2>Login</h2>
</div>
<div className="card-body">
<myContext.Consumer>
{(contextData)=>{
return contextData.length > 0 ?
<Table header={this.state.header}
data= {[contextData[0].login.username,contextData[0].login.password]}
/>
:
<div></div>
}}
</myContext.Consumer>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
5) In Every component we required table to show the data. So instead of writing table code for each component , its better to write separate component for table and use that table code in each component
import React, { Component } from 'react';
class Table extends Component {
render() {
return <div className='container'>
<div className='row'>
<div className='col'>
<table className='table table-hover'>
<thead>
<tr>
{
this.props.header.map((element)=>{
return <th>{element}</th>
})
}
</tr>
</thead>
<tbody>
<tr>
{
this.props.data.map((ele)=>{
return <td>{ele}</td>
})
}
</tr>
</tbody>
</table>
</div>
</div>
</div>;
}
}
export default Table;
