Tell us what’s happening:
Describe your issue in detail here.
minor “bug”, the feedback if you still initialize messages within React State is that you must initialize input: ‘’.
It’s just confusing to be told you need to include something that is already included, when it in fact wants something else removed.
**Your code so far**
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message: message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);
// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
// Change code below this line
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
// messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
// console.log('b',this.props.submitNewMessage,this.props) // check b4
this.props.submitNewMessage(this.state.input) // send (dispatch) to redux store
// console.log('a',this.state) // check after
// still need to empty input
this.setState(() => ({input:''}))
// old react only version
// this.setState((state) => ({
// input: '',
// messages: state.messages.concat(state.input)
// }));
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{//console.log(this.props.messages)
}
{
this.props.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
{ // comments need {} and last must be on new line?
// react version:
// {this.state.messages.map( (message, idx) => {
// return (
// <li key={idx}>{message}</li>
// )
// })
// }
//
}
</ul>
</div>
);
}
};
// Change code above this line
const mapStateToProps = (state) => {
return {messages: state}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message))
}
}
};
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
class AppWrapper extends React.Component {
render() {
return (
<Provider store={store}>
<Container/>
</Provider>
);
}
};
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Challenge: Extract Local State into Redux
Link to the challenge: