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;
Posted By : pankaj_bhakre
No comments:
Post a Comment