Introduction

This series will allow you to learn ReactJS and Redux thoroughly in a steady manner.

Also, to understand from the beginning, please go through with Part-One.

It will cover the following things.

Implementation – Pass argument from one component to other

Example

Here, we have message component which will render the arguments passed from App component.
  1. import React, { Component } from "react";
  2. import logo from "./logo.svg";
  3. import "./App.css";
  4. class App extends React.Component {
  5. constructor() {
  6. super();
  7. }
  8. render() {
  9. return (
  10. <div>
  11. <MessageComponent message1="Hello" message2="Hello2" />
  12. </div>
  13. );
  14. }
  15. }
  16. class MessageComponent extends React.Component {
  17. render() {
  18. return (
  19. <div>
  20. <tr>
  21. <td>{this.props.message1}</td>
  22. </tr>
  23. <tr>
  24. <td>{this.props.message2}</td>
  25. </tr>
  26. </div>
  27. );
  28. }
  29. }
  30. export default App;
Output
React And Redux Essentials

Implementation – Pass data from the state into render method

Example

Here, we have only one component and pass the state data into the render method.
  1. import React, {Component } from "react";
  2. import logo from "./logo.svg";
  3. import "./App.css";
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. name: 'Gourav',
  9. date: new Date()
  10. }
  11. }
  12. render() {
  13. return (<div>
  14. <h1>{this.state.name}</h1>
  15. <h1>{this.state.date.toLocaleDateString()}</h1>
  16. </div>)
  17. }
  18. }
  19. export default App;

Output

Name and Date property will be printed.

React And Redux Essentials

Implementation – Extend the props (properties) in the app with the default values

Example

  1. import React, { Component } from "react";
  2. import logo from "./logo.svg";
  3. import "./App.css";
  4. import PropTypes from 'prop-types';
  5. class App extends React.Component {
  6. render() {
  7. return (<div>
  8. <h1>{this.props.prop1}</h1>
  9. <h1>{this.props.prop2 ? "true" : "false"}</h1>
  10. <h1>{this.props.prop3(3)}</h1>
  11. <h1>{this.props.prop4}</h1>
  12. <h1>{this.props.prop5}</h1>
  13. <h1>{this.props.prop6.name}</h1>
  14. <h1>{this.props.prop6.age}</h1>
  15. </div>)
  16. }
  17. }
  18. App.propTypes = {
  19. prop1: PropTypes.array.isRequired,
  20. prop2: PropTypes.bool.isRequired,
  21. prop3: PropTypes.func,
  22. prop4: PropTypes.number,
  23. prop5: PropTypes.string,
  24. prop6: PropTypes.object
  25. }
  26. App.defaultProps = {
  27. prop1: [1, 2, 3],
  28. prop2: true,
  29. prop3: function (e) { return e },
  30. prop4: 1,
  31. prop5: "gourav",
  32. prop6: { name: "Gourav", age: 29 }
  33. }
  34. export default App;

Output

All the properties values will be printed,
React And Redux Essentials

Implementation – Passing state between constructor and normal method in a class and setting the state

Example

  1. import React, { Component } from "react";
  2. import logo from "./logo.svg";
  3. import "./App.css";
  4. import PropTypes from 'prop-types';
  5. class App extends React.Component {
  6. constructor() {
  7. super();
  8. this.state = {
  9. data: [],
  10. index: 0
  11. };
  12. this.setStatehandler = this.setStatehandler.bind(this);
  13. }
  14. setStatehandler() {
  15. var country = [India, US, UK];
  16. var data1 = this.state.data.slice();
  17. var i = this.state.index;
  18. data1.push(country[this.state.index]);
  19. this.setState({ data: data1, index: ++i });
  20. }
  21. render() {
  22. return (
  23. <div>
  24. <button onClick={this.setStatehandler}>Add Country</button>
  25. <h1>{this.state.data}</h1>
  26. </div>
  27. );
  28. }
  29. }
  30. export default App;

Output

After clicking the button three times,
React And Redux Essentials

Stay tuned for the next article which will have more concepts of ReactJS.

Happy learning!