hello, can somebody help me ??
i take this code in create-react-app ,
it just print some little dots, but any wod…
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';
//redux
const ADD='ADD';
const addMessage=(message)=>{
return{
type:ADD,
messgage:message
}
};
const messageReducer=(state=[],action)=>{
switch(action.type){
case ADD:return [...state,action.message];
default:return state;
}
}
const store =createStore(messageReducer);
//react
class Display extends React.Component{
constructor(props) {
super(props)
this.state={
input:'',
}
this.handleChange=this.handleChange.bind(this);
this.submitMessage=this.submitMessage.bind(this);
}
handleChange(e){
this.setState({
input:e.target.value
})
}
submitMessage(){
this.props.dispatch1(this.state.input);
this.setState({
input:''
})
}
render() {
return (
<div>
<h2>Type in a new message:</h2>
<input placeholder="let's go" value={this.state.input} onChange={this.handleChange} /><br/>
<button onClick={this.submitMessage}>SUBMIT</button>
<ul>
{this.props.message.map((val,index)=>{
return <li key={index}>{val}</li>
})}
</ul>
</div>
)
}
}
//react-redux
const state=[];
const mapStateToProps = (state) => {
return {
message: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
dispatch1: (message) => {
dispatch(addMessage(message));
}
}
};
const Container=connect(mapStateToProps,mapDispatchToProps)(Display);
class App extends React.Component{
render(){
return(<Provider store={store}>
<Container/>
</Provider>)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));