EDIT: The rendering component state problem
The question above arouse from my research to solve a component state problem I have found. @TomJNowell stated that the problem I have is not related to state, so I'm posting a simplification of my code to only address the original problem that led me to research about dealing with state on WordPress block components.
edit.js:
export default function Edit({attributes, setAttributes}) {
const getClassName = (status) => status === 'info'? 'mbp-black' : 'mbp-red';
const getSelectedIcon = (status) => status == 'info' ? icons.info : icons.error;
return (
<div{...useBlockProps({className: getClassName(attributes.status) })}>
<BlockControls>
<ToolbarDropdownMenu hasArrowIndicator
icon={ getSelectedIcon(attributes.status) }
label="Status"
controls={[
{
icon: icons.info,
title: 'Info',
onClick: () => setAttributes({status: 'info'}),
isActive: attributes.status === 'info'
},
{
icon: icons.error,
title: 'Error',
onClick: () => setAttributes({status: 'error'}),
isActive: attributes.status === 'error'
}
]}
/>
</BlockControls>
<p >
{__(
'I have state!!!!',
'multiple-blocks-plugin'
)}
</p>
</div>
);
What I want to achieve with this code is, that immediately after the user chooses Info or Error on the dropdown menu, the component on the editor be re-rendered with the equivalent css class and also if I've selected the Error option, the next time I open the menu, this should be the selected option on the menu.