Using monday ui. How to change value prop

monday Apps & Developers
,
1

I dont know if this is a React question or a Monday UI question. Look at this reproduction

I am using EditableHeading

When you edit the field - a discard button appears. how can i change the value of the editableHeader in this example?

Here is my component

import { EditableHeading, Label } from 'monday-ui-react-core';
import { useState } from 'react';

export declare enum HeadingTypes {
  h1 = 'h1',
  h2 = 'h2',
  h3 = 'h3',
  h4 = 'h4',
  h5 = 'h5',
  h6 = 'h6',
}
type HeadingTypeValues = `${HeadingTypes}`;

export interface Props {
  val: string;
  type: HeadingTypeValues;
  save: (val: string) => void;
}

export const Field = ({ val, type, save }: Props) => {
  const [edits, setEdits] = useState('');
  const [value, setValue] = useState(val);

  function editVal(name: string) {
    console.log(`🚀 => Field => editVal => name:`, name);
    setEdits(name);
  }

  function discard() {
    setEdits('');
    setValue(val);
  }

  return (
    <div className='block relative'>
      <EditableHeading
        type={(EditableHeading as any).types[type]}
        value={value}
        onChange={editVal}
      />
      {edits.length > 0 && (
        <div className='actions absolute right-3 top-3 flex text-xs'>
          <Label
            className='cursor-pointer opacity-90 hover:opacity-100'
            text='Discard'
            color={Label.colors.DARK}
            onClick={discard}
          />
        </div>
      )}
    </div>
  );
};
2

I could have written that better. Basically - I am trying to change the value of the EditableHeader component in the discard() function.

You can see it all in action in the reproduction link above.

4

Hello there @ContactOmarNow,

I checked this with the team and they mentioned that the issue is related to React, and not monday.

The value state is initialized with val. If val changes later through props, value won’t automatically update, leading to stale state. If you expect val to be updated externally, you might want to use a useEffect to keep value in sync with val.

You should be able to fix it like this:

  setValue(val);
}, [val]);

I hope that helps!

Cheers,
Matias

5

Thank you for the help.

It is very easy to test theories because of this reproduction. playcode[dot]io/2018514 (forum wont allow me to re paste the link)

I set up the useEffect. It had no effect :frowning:

I need for the discard button to change the value programmatically.

7

Hello again @ContactOmarNow,

Our Vibe team has asked if you can please create an issue here so that they can take a look into it!

1 Like
8

I did. Here is a link to that issue.

( i would post it but it wont let me )

github.[com]/mondaycom/vibe/issues/2461

9

Thank you @ContactOmarNow!

Our team will take a look into it :smile: