Can you pass a Stateful Component a function to run inside componentDidMount()?

Asked
Active3 hr before
Viewed126 times

7 Answers

insidefunctioncomponent
90%

I am trying to pass a function called execute() via props to the componentDidMount() function inside of the ChildComponent. The function should execute in the context of ChildComponent and not within the context of App. For example, I want to be able to call this.props from inside the () => {} of the execute prop, but this.props refers to the props of ChildComponent and not App.,Now, inside the execute scope, this will refer to the ChildComponent instance, so inside the execute function you will be able to access this.props like you would inside the ChildComponent. Hope it helps you.,In the parent component, you will have to change the arrow function to the ordinary function syntax:

This violates the react unidirectional data flow principle, but you can solve it this way:

import React from 'react';

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    componentDidMount() {
        return this.props.length > 0 ? this.props.execute.bind(this)() : '';
    }

    render() {
        return (
            <>
                <h1>Hello, World.</h1>
            </>
        );
    }
}

export default ChildComponent;
load more v
88%

Pretag
 Pretag team - issue, fix, solve, resolve
72%

this is a function imported from the react package and to be called within a functional component. This gives functional components the ability to manage state.,Prior to hooks you were required to use class based components if either a state or a lifecycle method was necessary . However, with this new feature functional components now have the ability have a states and lifecycle methods.,Within a class Component the following syntax was used if a state was required:

Within a class Component the following syntax was used if a state was required:

import React, { Component } from 'react';class Playlist extends Component {  state = { songs: [] }    songHandler = () => {    this.setState({ songs: ['The Chain'] }  }  render() {    return (      <button onClick={this.songHandler}>        Add to Playlist      </button>    )  }}
load more v
65%

So far we know we can add lifecycle methods in stateful component only.,Passing an empty array as a second argument to useEffect function call makes it work like componentDidMount.,We can add multiple useEffect functions in a single component.

To use it, we will need to import it from react −

import React, {
   useEffect
} from‘ react’;
const tutorials = (props) => {
   useEffect(() => {
      console.log(‘hello’);
      setTimeout(() => {
         alert(‘hello’);
      }, 2000);
   });
}
load more v
75%

You can convert a function component like Clock to a class in five steps:,Clock is now defined as a class rather than a function.,Passing Functions to Components

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(    element,    document.getElementById('root')  );}

setInterval(tick, 1000);
load more v
40%

Presentational components are only concerned with how things look and are not aware of the Redux state. They get their data from props and may trigger callbacks passed to them via props,React provides two major mechanisms for providing data to components: props and state. Props are read-only and allow a parent component to pass attributes to a child component. State is local and encapsulated within the component and can change at any time in the component’s lifecycle.,<Provider store> wraps the React application and makes the Redux state available to all container components in the application’s hierarchy

areStatesEqual ? : (next: Object, prev: Object) => boolean;
areOwnPropsEqual ? : (next: Object, prev: Object) => boolean;
areStatePropsEqual ? : (next: Object, prev: Object) => boolean;
areMergedPropsEqual ? : (next: Object, prev: Object) => boolean;
22%

Class Components: You can also use ES6 class to define a component. The above function component can be written as: ,Component is a class or function component that describes the presentational part of your application.,The Equivalent Functional Component

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    );
  }
}
load more v

Other "inside-function" queries related to "Can you pass a Stateful Component a function to run inside componentDidMount()?"