[solved] Help refactoring the "React Redux" case with React Hooks

1

Struggling to refactor the front end React Redux case with React Hooks. I can’t manage to list the input items down. Pointers will be more than welcome!

// 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
const Presentational = (props) => {
  
  const [input, setInput] = React.useState("");

  const submitMessage = () => {
    props.submitNewMessage(input)
  }
  
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={input}
           onChange={e => setInput(e.target.value)}/><br/>
        <button onClick={submitMessage}>Submit</button>
        <ul>
           {props.messages.map( (message, idx) => {  
              return (
                 <li key={idx}>{message}</li>
              )
            })
          } 
         {/* {this.props.messages.map( (message, idx) => {  
              return (
                 <li key={idx}>{message}</li>
              )
            })
          } */}
        </ul>
      </div>
    );
};

// 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() {
//     this.props.submitNewMessage(this.state.input);
//     this.setState({
//       input: '',
//       // messages: this.state.messages.concat(this.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>
//           {/* {this.state.messages.map( (message, idx) => { */}
//           {this.props.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);

const AppWrapper = () => {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
};

// class App extends React.Component {
//   render() {
//     return (
//       <Provider store={store}>
//         <Container/>
//       </Provider>
//     );
//   }
// };

ReactDOM.render(<AppWrapper />, document.getElementById('app'));```