CODEWITHSUNDEEP
reactjs
Alex 75
Alex 75

Reputation: 3236

React functional component able to change its state, is possible?

I want to create a React component for a Dialog.
I want to use Bootstrap Modal component.
I use TypeScript.

This is the usage I plan to use:

<Dialog icon="edit" title="Edit the item" buttons={...} onSave={...} >
... put here the content of the dialog
</Dialog>

Now, I started to write the code to make the Modal visible (pseudo-code):

interface Props {
  // open by:
  buttonText: OpenIcons,

  title: string,
  isOpen?: boolean
}

export const Dialog:FC<Props> = (props) => {
  let {buttonText, title, isOpen, children} = props

  return <> 
    {button && <button className="btn btn-sm">{buttonText}}</button> }

    { isOpen && <div>
      {title}
      <div>{children}</div>
      <buttons>...</buttons>
    </div>
    }
  </>
}

The problem is: how can I manage to change the isOpen property to true and made the Dialog component reflect this state?
Yes, I can use another component in the page (button text, icon, link...) that manage to change that state and pass it to the Dialog component, but I don't want to.
I want the Dialog component to self-manage its icon/button/link trigger.
The only solution I can think about is create another component inside the Dialog component, a sort of wrapper.
It has to manage the DialogButton (or whatever) and a new DialogInternal component that are not exported, so that the developer just see the exorted Dialog component.
I hope this idea is clear.

There is any better way (simpler, cleaner) to achieve my goal?

Upvotes: 0

Views: 305

Answers (2)

user17364288
user17364288

Reputation:

Here is your code using a useState hook

export const Dialog:FC<Props> = (props) => {
  const [open, setOpen] = React.useState(false);
  let {buttonText, title, children} = props
  
  const handleClick = () => setOpen(!open);

  return <> 
    {button && <button className="btn btn-sm" onClick={handleClick}>{buttonText}}</button> }

    { open && <div>
      {title}
      <div>{children}</div>
      <button onClick={handleClick}>Close</button>
    </div>
    }
  </>
}

Upvotes: 1

Vishwa
Vishwa

Reputation: 128

You can use react hooks like useState and useEffect for maintaining a state in functional components

Ex: for Usestate

const [isOpen, setIsOpen] = React.useState(initial value);

for useEffect

React.useEffect(()=>{},[dependencies]);

Upvotes: 1

Related Questions