create UsersList component

This commit is contained in:
agatha 2024-04-12 22:24:27 -04:00
parent aa9e1cc542
commit 4724eff74c
4 changed files with 34 additions and 1 deletions

View File

@ -1,12 +1,13 @@
import React from "react";
import { Route } from "react-router-dom";
import Home from "./components/Home";
import UsersList from "./components/UsersList";
export default () => {
return (
<div>
<Route exact path="/" component={Home} />
<Route exact path="/users" component={() => 'Users'} />
<Route exact path="/users" component={UsersList} />
<Route exact path="/admins" component={() => 'Admins List'} />
<Route exact path="/profile" component={() => 'Current User'} />
</div>

View File

@ -1,3 +1,4 @@
import 'babel-polyfill';
import React from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";

View File

@ -0,0 +1,30 @@
import React, { Component } from "react";
import { connect } from 'react-redux'
import { fetchUsers } from "../actions";
class UsersList extends Component {
componentDidMount() {
this.props.fetchUsers();
}
renderUsers() {
return this.props.users.map(user => {
return <li key={user.id}>{user.name}</li>
})
}
render() {
return (
<div>
Users List
<ul>{this.renderUsers()}</ul>
</div>
);
}
}
function mapStateToProps(state) {
return { users: state.users };
}
export default connect(mapStateToProps, { fetchUsers })(UsersList);

View File

@ -1,3 +1,4 @@
import 'babel-polyfill';
import express from 'express';
import renderer from './helpers/renderer';
import createStore from "./helpers/createStore";