SHARE
TWEET

Untitled

a guest Aug 17th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const initialState = [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}];
  2.  
  3. const postReducer = (state = initialState, action) => {
  4.     switch(action.type) {
  5.       case 'ADD_POST':
  6.         return state.concat([action.data]);
  7.       default:
  8.         return state;
  9.     }
  10.   }
  11.   export default postReducer;
  12.      
  13. import React, {Fragment} from "react"
  14.  
  15.  
  16. class Table extends React.Component {
  17.     constructor(props) {
  18.         super(props);
  19.         this.state = {
  20.             employees: this.props.state
  21.         };
  22.  
  23.     }
  24.  
  25.  
  26.     render() {
  27.         return (
  28.             <Fragment>
  29.                 <thead>
  30.                     <tr>
  31.                         <th scope="col">Name</th>
  32.                         <th scope="col">Age</th>
  33.                         <th scope="col">Email</th>
  34.                     </tr>
  35.                 </thead>
  36.                 <tbody>
  37.                 {this.props.employees.map((item, index) => (
  38.                     <tr key={index}>
  39.                         <td>{item.name}</td>
  40.                         <td>{item.age}</td>
  41.                         <td>{item.email}</td>
  42.                     </tr>
  43.                 ))}
  44.                 </tbody>
  45.             </Fragment>
  46.         );
  47.     }
  48. }
  49.  
  50. export default Table;
  51.      
  52. import React, { Fragment } from "react"
  53.  
  54. class Form extends React.Component {
  55.     constructor(props) {
  56.         super(props);
  57.         this.state = {name: '', age: '', email: ''};
  58.     }
  59.  
  60.  
  61.  
  62.     render() {
  63.         return (
  64.             <form>
  65.                 <div className="form-group">
  66.                     <input name="name" type="text" />
  67.                 </div>
  68.  
  69.                 <div className="form-group">
  70.                     <input name="age" type="number"/>
  71.                 </div>
  72.  
  73.                 <div className="form-group">
  74.                     <input  name="email" type="text"/>
  75.                 </div>
  76.  
  77.                 <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>
  78.  
  79.             </form>
  80.         );
  81.     }
  82. }
  83.  
  84. export default Form;
  85.      
  86. import React from "react"
  87. import Table from "./table"
  88. import Form from "./form"
  89.  
  90. class App extends React.Component {
  91.  
  92.     constructor(props) {
  93.         super(props);
  94.         this.state = {
  95.         };
  96.     }
  97.  
  98.  
  99.     render() {
  100.         return (
  101.             <React.Fragment>              
  102.               <Form/>
  103.             <hr/>
  104.             <table>
  105.                 <Table />
  106.             </table>
  107.             </React.Fragment>
  108.         );
  109.     }
  110. }
  111. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top