Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<body>
  <section id="intro">
    <h1>React Redux code snippets</h1>
    <p>Here lie tutorials from freeCodecamp's Front End Deveopment Libraries' React Redux subunit. Also here are helpul snippets done during the unit or pertinent. I may make a section for each snippet or may not. Tutorials may be repeated as individual pens. Ones with their own pens might not appear here. As per custom, snippets are placed in ascending order or date or bottom to top by date.</p> <p>Something I wonder about is the render DOM for each snippet on a page of multiple. Does every application have its own call? Does root div take them all? Without Babel and react added, HTML comments of JSX and React code are still displaying.</p>
  </section>
  <section id="problems">
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    
<div>
<h2>Connect Redux to the Messages App</h2>
<p>Create a constant that is <code>Presentational</code> when it is connected to Redux.</p>
<p>Inside AppWrapper, render the <code> Provider</code> component. <br>
What is Provider again?<br>
This is the necessary component that allows the tree of its child  access to the store by virtue of being rendered. It takes store.</p>
  <pre><code>
// Redux:
const ADD = 'ADD';

const addMessage = (message) =&gt; {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) =&gt; {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
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.setState((state) =&gt; {
      const currentMessage = state.input;
      return {
        input: '',
        messages: state.messages.concat(currentMessage)
      };
    });
  }
  render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Type in a new Message:&lt;/h2&gt;
        &lt;input
          value={this.state.input}
          onChange={this.handleChange}/&gt;&lt;br/&gt;
        &lt;button onClick={this.submitMessage}&gt;Submit&lt;/button&gt;
        &lt;ul&gt;
          {this.state.messages.map( (message, idx) =&gt; {
              return (
                 &lt;li key={idx}&gt;{message}&lt;/li&gt;
              )
            })
          }
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
};

// React-Redux:
const mapStateToProps = (state) =&gt; {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) =&gt; {
  return {
    submitNewMessage: (newMessage) =&gt; {
       dispatch(addMessage(newMessage))
    }
  }
};

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

// Define the Container component here:
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Complete the return statement:
    return (
      &lt;Provider store={store}&gt;
      &lt;Container /&gt;
      &lt;/Provider&gt;
    );
  }
};
const addMessage = (message) =&gt; {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) =&gt; {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) =&gt; {
  return {
    submitNewMessage: (message) =&gt; {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return &lt;h3&gt;This is a Presentational Component&lt;/h3&gt;
  }
};

const connect = ReactRedux.connect;
// Change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
</code></pre>
</div>
    
<div>
<h2>Connect Redux to React</h2>
<pre><code>const ConnectedComponent = function connect(mapStateToProps, mapDispatchToProps)(Presentational);
</code></pre>
<p>An error that mapStateToProps had already been declared appeared. I carried the solution onto a fresh sheet. Finding no errors line by line within that variable, I filled the same solutoin. That having worked, it seems that there was an issue with commenting.</p>
<pre><code>
  const addMessage = (message) =&gt; {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) =&gt; {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) =&gt; {
  return {
    submitNewMessage: (message) =&gt; {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return &lt;h3&gt;This is a Presentational Component&lt;/h3&gt;
  }
};

const connect = ReactRedux.connect;
// Change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
</code></pre>
  </div>
    
    <div>
<h2>Dispatch to Show Form of Arrow Function Arguments</h2>
<pre><code>
  return {
    onClick:
  };
  </code></pre>
<p>How do I type an anonymous arrow function?</p>
<pre><code>(parameters) => arrow  function body</code></pre>
<p>I do not know what mapStateToProps in this example is or does. It could be comparing an action creator with certain available state types.</p>
<pre><code>
  const mapStateToProps = ()  =&gt;  {
  active: ownProps.filter === stateVisibilityFilter
};
const mapDispatchToProps = (dispatch, ownProps) =&gt;  {
  return {
    onClick: () =&gt;  {
      dispatch(setVisibilityFilter(ownProps.filter));
    }
  };
};
</code></pre>
</div>
    
    <div>
      <h2>Map Dispatch to Props</h2>
<pre><code>{submitNewMessage: dispatch}
{submitNewMessage: dispatch}
return {submitNewMessage: dispatch(addMessage(message))</code></pre>
      <p>Mm, I want to do something as easy as fall asleep.<br>
A nap was taken.<br>
The argument is the payload transformed, within a function. I break this down into a dispatch of the acion creator <code>addMessage</code>. This blank item is given a relative pronoun of <code>message</code> for reeference of <code>message</code> object from the result of some <code>message</code> passed into this dispatch.</p>
<pre><code>//Map dispatch to props
const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};
// Change code below this line
let mapDispatchToProps = (dispatch) =>
  {return {submitNewMessage: (message) => {dispatch(addMessage(message))}
          }
  };
</code></pre>
<div>

<div>
<h2>Map State to Props</h2>
<p><em>Some properties of a component will be selected for mapStateToProps. These properties will become accessible to the component in props.</em> What a confusing idea.</p>
<p>&quot;Create a property <code>messages</code> in the object that&apos;s being returned, and set it to <code>state.</code>&quot; It sounds like an object can be specified in this function and that the property is going to be <code>messages</code>.<br>
<code>state.</code> is being returned as it is a variable that represents an array of messages that can be the value of the <code>messages</code>  property.</p>
<pre><code>
const state = [];

// Change code below this line
let mapStateToProps = (state =>
{
  return {messages: state};
}
);
</code></pre>
  </div>
    
<div>
<h2>Manage state locally first</h2>
<pre><code>
handleChange(event)  {this.setState({input: event.target.value})}
  submitMessage() {this.setState({messages: messages.concat([...input])
  input: ""})}
  </code></pre>
<p>How does one use state? We could say state of each property.</p> 
<pre><code>
this.setState({messages: state.messages.concat(state.input)
this.setState({messages: [...state.messages, state.input]
</code></pre>
<p>Is the previous input state, input, or messages? <br>
  Messages and current state of input are needed. event.target.value is reassigned to this.state.input. this.state.input is given to messages in conjunction with this.state.messages.</p>
<p>Is there the this keyword? In this.setState there is no more mention of this.</p>
<p>The directions I have are "When the input element changes, it should trigger a handleChange() method. The button element should trigger a submitMessage() method when it's clicked." It sounds like the events are called onChange and onClick. Are these the correct event handlers? <br>
  Yep, events have specific handlers.</p>
<p>Clicking the submit button grabs the onChange input and activates submitMessage. handleChange is the name of input target.event.value. Input would display handleChange. The button element value would be this.input.value</p>
<pre><code>
&lt;input type="text" onChange={this.handleChange} /&gt;
&lt;button type="submit" value={this.input} onClick={this.submitMessage}&gt;Add message&lt;/button&gt;
</code></pre>
<p>The attribute of value belongs to input elements. This code has it on button.</p>
<p>Now to work on the JavaScript map method placement of the list element.</p>
<pre><code>
{state.messages.map(element =>
&lt;ul messags={element.messages} /&gt;);}
let listItems = messsages.map(item =>
&lt;li&gt;{item}&lt;/li&gt;
);

&lt;ul&gt;
{this.state.messages.map(element =>
&lt;li&gt;{element}&lt;/li&gt;)}
&lt;/ul&gt;
</code></pre>
<p>Create list elements of messages. States of messages can be used. The third was a found snippet from kevinSmith. I had trouble when I thought that I would have to describe messages as an attribute in ul. Using braces, I can use state.messages with map as a list element, no, as the ul. I thought there might be code in my ul because of that. I was reminded that li could take code inside of a JavaScript map method. Figuring out how to list current input was difficult. Braces went around the map method's element and ul went inside render.</p>
<p>Test "The input element should render the value of input in local state." Is my input not taking value from a local state of input?
<pre><code>
&lt;input type="text" onChange={this.handleChange} value={this.state.input} /&gt;
</code></pre><br>
I added the word "state" to this.input on value. I do not know what adding state did. Who would think the thing added would not be "this" to state.input? I am ready to read about local and global state. This project took two days.</p>
<pre><code>
class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(event)  {this.setState({input: event.target.value})}
  submitMessage() {
    this.setState({input: "", messages: this.state.messages.concat(this.state.input)
    });
  }
  render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Type in a new Message:&lt;/h2&gt;
        { /* Render an input, button, and ul below this line */ }
        &lt;input type="text" onChange={this.handleChange} value={this.state.input} /&gt;
        &lt;button type="submit" onClick={this.submitMessage}&gt;Add message&lt;/button&gt;
        &lt;ul&gt;
        {this.state.messages.map(element =>
        &lt;li&gt;{element}&lt;/li&gt;)}
        &lt;/ul&gt;
        { /* Change code above this line */ }
      &lt;/div&gt;
    );
  }
};&lt;/code&gt;&lt;/pre&gt;
  </div>
  </section>
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                



//Connect Redux to the Messages app

// 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:
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.setState((state) => {
      const currentMessage = state.input;
      return {
        input: '',
        messages: state.messages.concat(currentMessage)
      };
    });
  }
  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) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

// React-Redux:
const mapStateToProps = (state) => {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (newMessage) => {
       dispatch(addMessage(newMessage))
    }
  }
};

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

// Define the Container component here:
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Complete the return statement:
    return (
      <Provider store={store}>
      <Container />
      </Provider>
    );
  }
};



//Connect Redux to React
const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

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

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// Change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);



//Dispatch to show form of arrow function arguments
const mapStateToProps = ()  =>  {
  active: ownProps.filter === stateVisibilityFilter
};
const mapDispatchToProps = (dispatch, ownProps) =>  {
  return {
    onClick: () =>  {
      dispatch(setVisibilityFilter(ownProps.filter));
    }
  };
};



//Map dispatch to props
const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};
// Change code below this line
let mapDispatchToProps = (dispatch) =>
  {return {submitNewMessage: (message) => {dispatch(addMessage(message))}
          }
  };



    //Map State to Props
const state = [];

// Change code below this line
let mapStateToProps = (state =>
{
  return {messages: state};
}
);



//Manage state locally first 
class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(event)  {this.setState({input: event.target.value})}
  submitMessage() {
    this.setState({input: "", messages: this.state.messages.concat(this.state.input)
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
        <input type="text" onChange={this.handleChange} value={this.state.input} />
        <button type="submit" onClick={this.submitMessage}>Add message</button>
        <ul>
        {this.state.messages.map(element =>
        <li>{element}</li>)}
        </ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};
              
            
!
999px

Console