React and Redux - Connect Redux to the Messages App

JavaScript
1

Tell us what’s happening:

I have tried to pass this one but I’m stuck on these two tasks any help would be appreciated! Show example for corrections.

Your code so far

// Redux setup (assuming this part is already defined)
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 component (assuming this part is already defined)
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    // Notice we're calling submitMessage here, not submitNewMessage
    this.props.submitMessage(this.state.input);
    this.setState({
      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.props.messages.map((message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

// React-Redux connection - The critical part to fix
const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

// Connect the components properly
const Container = ReactRedux.connect(
  mapStateToProps,
  mapDispatchToProps
)(Presentational);

// Wrap Container with Provider
class AppWrapper extends React.Component {
  render() {
    return (
      <ReactRedux.Provider store={store}>
        <Container />
      </ReactRedux.Provider>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Challenge Information:

React and Redux - Connect Redux to the Messages App

2

For the Provider you are required to use the initial setup code. For connect you can use ReactRedux.connect inline instead if you want.

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

Then, do not change anything else above the // Define the Container component here: code comment.

3

Tell us what’s happening:

Thanks for that I’ve passed it now hey where am I going wrong on this?

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Explore the beauty of Japan with our travel packages. Visit Tokyo, Kyoto, Mount Fuji and experience Japanese culture.">
    <title>Explore Japan - Travel Destination</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Explore Japan</h1>
    <p>Discover the Land of the Rising Sun</p>
    <p>From ancient temples to futuristic cities, Japan offers unforgettable experiences</p>
    
    <ul>
        <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
        <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
    </ul>
              
    <h2> Packages </h2>
    
    <p>Choose from our carefully designed travel packages for an authentic Japanese experience</p>
    
    <h2>Top Itineraries</h2>
    
    <figure>
        <a href="https://www.freecodecamp.org/learn" target="_blank">
            <img src="https://i.imgur.com/pYWHoFW.jpeg" alt="Tokyo Skyline">
        </a>
        <figcaption>Tokyo: Modern Metropolis Experience</figcaption>
    </figure>
    
    <figure>
        <a href="https://www.freecodecamp.org/learn" target="_blank">
            <img src="https://i.imgur.com/JXQFmjF.jpeg" alt="Kyoto Temple">
        </a>
        <figcaption>Kyoto: Ancient Temples and Gardens</figcaption>
    </figure>
    
    <figure>
        <a href="https://www.freecodecamp.org/learn" target="_blank">
            <img src="https://i.imgur.com/wCGJJkR.jpeg" alt="Mount Fuji">
        </a>
        <figcaption>Mount Fuji: Natural Wonder</figcaption>
    </figure>
    
    <figure>
        <a href="https://www.freecodecamp.org/learn" target="_blank">
            <img src="https://i.imgur.com/8AgECYV.png" alt="Osaka Street Food">
        </a>
        <figcaption>Osaka: Culinary Adventure</figcaption>
    </figure>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Challenge Information:

Build a Travel Agency Page - Build a Travel Agency Page

4

its nothing to do with indents its showing an error

5

now this is a completely different challenge, please open a separate topic for this challenge