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>
    )
  }

Answer 1

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> 

Answer 2

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 />}
    )
}```

Answer 3

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 ).