How do I disable a fieldsset using a variable instead of the "disable" word

515 Views Asked by At

I learn React JavaScript and now I have this problem.

Reading the w3schools about fieldsset

I wanted in this code to use the currentEditableFile if it's true to set fieldset = enabled but it's not working using the ternary as you see here:

<fieldset className={classes.tagssList} {currentEditableFile ? enabled: disabled}>
        <legend>Select Tags to include</legend>
        {tagsList.map(skill => (
            <button
                className="btn btn-warning btn-sm"
                disabled={false}
                key={skill}
                type="button"
                onClick={() => (currentEditableFile ? onSaveTag(skill) : null)}
            >
                {skill}
            </button>
        ))}
    </fieldset>
2

There are 2 best solutions below

0
jeffreyquan On BEST ANSWER

You can do it this way. Set the value of disabled equal to !currentEditableFile, which means if the currentEditableFile is true, disabled on the fieldset will be false.

<fieldset className={classes.tagssList} disabled={!currentEditableFile}>
        <legend>Select Tags to include</legend>
        {tagsList.map(skill => (
            <button
                className="btn btn-warning btn-sm"
                disabled={false}
                key={skill}
                type="button"
                onClick={() => (currentEditableFile ? onSaveTag(skill) : null)}
            >
                {skill}
            </button>
        ))}
    </fieldset>
0
alisasani On

Please use it as below:

<fieldset disabled={!currentEditableFile} >

Please check the working example in sandbox