How to dynamically change a header text on Material UI dialogue with an if statement?

Admin 1
Viewed 527

enter image description here

Modal.js

import { Dialog, DialogTitle, DialogContent, DialogActions } from "@material-ui/core";

const Modal = (props) => {
const { title } = props;

<Dialog>
   <DialogTitle>
      {title} // <- Where the dialog header text is passed into.
   </DialogTitle>
   <DialogContent/>
   <DialogActions/>
</Dialog>

}

Main.js I've create an if statement to change the header title between Add Information and Edit Information.

import Modal from "../Modal";

<Modal
   title={() => {
       if (materialValues.id === 0) { // <- materialValue.id = 0 if adding new information.
           return "Add Information";
       } else {
           return "Edit Information";
       }
   }}
/>

I feel that this code should work, but it comes out empty without any error statement.

react-hooks reactjs if-statement function
1 Answers

You are passing a function that is never called to return a value. Use a ternary operator to pass one or the other title value. The ternary expression will be immediately executed and the result passed in the title prop to the Modal component.

<Modal
  title={materialValues.id === 0 ? "Add Material" : "Edit Material"}
/>
user_86908570
Related