const initialState = [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}];

const postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.concat([action.data]);
      default:
        return state;
    }
  }
  export default postReducer;

import React, {Fragment} from "react"


class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: this.props.state
        };

    }


    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

export default Table;

import React, { Fragment } from "react"

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
    }



    render() {
        return (
            <form>
                <div className="form-group">
                    <input name="name" type="text" />
                </div>

                <div className="form-group">
                    <input name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input  name="email" type="text"/>
                </div>

                <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>

            </form>
        );
    }
}

export default Form;

import React from "react"
import Table from "./table"
import Form from "./form"

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>
              <Form/>
            <hr/>
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;