Send properties and functions from a Component to a Functional Component

Question

Send properties and functions from a Component to a Functional Component

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a small problem when trying to send my props and functions to a functional component, they will see. I want to have the state and functions in a Component and the interface in a Functional Component , my question is How do I send the properties of the Component to the Functional Component?

Then I put my code so they can help me, many thanks in advance!

import React, { PureComponent } from "react";

import ModalComponent from "../../components/ModalComponent";



class ModalContainer extends PureComponent {
  state = {
    open: false
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <ModalComponent
        open={this.state.open}
        handleOpen={this.handleOpen}
        handleClose={this.handleClose}
      />
    );
  }
}

export default ModalContainer;

And my ModalComponent, which is what I want to receive the properties. (I will not put the other part of the code so as not to interfere with distractions)

function ModalComponent(props) {
  const { classes } = props;

  return (
    <div>
      <Button onClick={props.handleOpen}>Open Modal</Button>
      <Modal open={props.open} onClose={props.handleClose}>
        <div style={getModalStyle()} className={classes.paper}>
          {props.children}
        </div>
      </Modal>
    </div>
  );
}

javascript react

asked by Diego Cardona 30.11.2018 в 02:35

source

2 answers

0

In your functional component you need to import React, if you use JSX, React must be in the scope, so your functional component would look like this:

import React from 'react'

function ModalComponent(props) {
  const { classes } = props;

  return (
    <div>
      <Button onClick={props.handleOpen}>Open Modal</Button>
      <Modal open={props.open} onClose={props.handleClose}>
        <div style={getModalStyle()} className={classes.paper}>
          {props.children}
        </div>
      </Modal>
    </div>
  );
}

answered by 04.12.2018 в 11:35

Angular getting CORS No Access-Control-Allow Origin when references css file on a https server [duplicate] I have problems with NetBeans

score 0 · Accepted Answer

The easiest way to pass a function is using Arrow Functions as I show you in my example:

import React, { Component } from 'react';
import { render } from 'react-dom';
import MyComponent from './MyComponent';

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <MyComponent
          button1={()=>this.saludar1()}
          button2={()=>this.saludar2()}
        />
      </div>
    );
  }
  saludar1() {
    alert('Hola 1');
  }
  saludar2() {
    alert('Hola 2');
  }
}


import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>
          MyComponent
        </h1>
          <button onClick={this.props.button1}>
            Boton 1
          </button>
          <button onClick={this.props.button2}>
            Boton 2
          </button>
      </div>
    );
  }
}

export default MyComponent;