Using Functional-component inside a Class-component method

Question

I have no syntax error and the code compiles fine, but the called functional component, 'SuccessfulModal', never gets rendered.

my functional component

import React from 'react'

export default function SuccessfulModal() {

const hello = () => {
    return alert("Welcome :)")
}

  return (
    <div>
        {hello()}
    </div>
  )
}

my class component

import SuccessfulModal from "../successfulModal/SuccessfulModal"

 export default class ConfirmationModal extends Component {
  
  state = {
    open: false,
    revisionId: ""
    }

 saveOnClick = () => {
    axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
      revisionId: 36,
    })
    .then((response) => {
      console.log(response) /* Gets called */
      this.setState({open: false})  /* Gets called */
      return <SuccessfulModal/>  /* Never gets called */
    })

  submitorCancelButton = () => (
       <Button className="saveButton" onClick={this.saveOnClick}>  Save   </Button>
  )

Render method

  render() {
       return (
         <div>
                                  {this.submitorCancelButton()}
         </div>
    )
  }

This is not how React works...... If you don't have a render method in your class, nothing will ever get, well, rendered.. — Baruch
– Baruch, Commented Apr 17, 2019 at 9:13
Please show the render method for ConfirmationModal (if it exists) - it's impossible to know why it's rendering wrong if you don't show us what you're rendering! — Joe Clay
– Joe Clay, Commented Apr 17, 2019 at 9:13

Tholle · Accepted Answer · 2019-04-17 09:19:22Z

What you return from the function given to then in your axios request is not used in the component rendering.

You can instead change a piece of state and use that in the render method to figure out if your should render your SuccessfulModal component or not.

Example

const { useEffect } = React;

function SuccessfulModal() {
  const hello = () => {
    alert("Welcome :)");
  };

  useEffect(hello, []);

  return <div>SuccessfulModal</div>;
}

class ConfirmationModal extends React.Component {
  state = {
    open: false
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ open: true });
    }, 1000);
  }

  render() {
    return this.state.open ? <SuccessfulModal /> : null;
  }
}

ReactDOM.render(<ConfirmationModal />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Ertan Hasani · Accepted Answer · 2019-04-17 09:17:37Z

The problem is that you're just returning it on a method;

instead try add to state showModal to false, and then when the requests and just set showModal: true and in your render method add that if showModal is true then render `:

state = {
  open: false,
  revisionId: "",
  showModal: false
}

saveOnClick = () => {
  axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
    revisionId: 36,
  })
    .then((response) => {
      console.log(response) /* Gets called */
      this.setState({
        open: false,
        showModal: true
      })  /* Gets called */
    })

  render(){
    const { showModal } = this.state;

    return (
      { showModal && <SuccessfulModal />}
    )
}```

StackUser2204 · Accepted Answer · 2019-04-17 09:42:18Z

0

I think the issue that is that you are returning the element and not rendering it. It needs to be rendered on the DOM since it doesn't have render method. In your case if you had to do a render on this you would do

Do npm install react-dom and then, if you're using ES6, you can do:

import ReactDOM from 'react-dom';

or if you're using ES5 you can just do:

var ReactDOM = require('react-dom')

I would change the last line to

ReactDOM.render(<SuccessfulModal/>, document.getElementById('root');

Now the element can render ( assuming root is the main div of your app ).

answered Apr 17, 2019 at 9:42

StackUser2204

1261 silver badge7 bronze badges

Collectives™ on Stack Overflow

Using Functional-component inside a Class-component method

my functional component

my class component

Render method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my functional component

my class component

Render method

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related