DEV Community: jan

How to hide content conditionally in js?

jan — Fri, 03 Jun 2022 05:50:13 +0000

I have two dropdowns.
First with A, B, C and second with D, E, F, G. Next only after selecting the options from first and second dropdowns I am able to select the content which is a list of checkboxes.
Now I want to hide my content until user selects the option from first and second dropdown. Till now I have made it unselectable until user selects options from both the dropdowns, but now I want to hide it. As soon as the user selects options from first and second dropdowns the content should appear.

reactjs #discuss

How to get an alert message when changing the options in react?

jan — Tue, 26 Apr 2022 06:35:16 +0000

I am having an ADD button which allows me to add some objects to the option that I selected in the dropdown. And I also have a function attached to that Add Button.

` onAddClicked = () =>{
this.setState({
showOptions: true
});

}`

<button type="button" onClick={this.onAddClick} style={{ float: "right", marginLeft: "10px", marginRight: "10px" }} id="AddSelectedTag" className={((this.state.selectedOptions ?this.state.selectedOptions.length === 0 : true) ? "re-btn-primary-inactive" : "re-btn-primary-blue")}disabled={(this.state.selectedOptions ? this.state.selectedOptions.length === 0 : true) ? true : false}>Add </button>
I can select and option and few objects under it. Now I need to display an error message when I want to change my option after selecting few objects under that. I am having state for my selected options as "this.state.selectedOptions". I am trying this in my onAddClick().

if(this.state.selectedOptions ? this.state.selectedOptions.value : null) { alert("selectedOptions value has changed"); }
But this is returning an alert message everytime I click on the Add button, not when I try to change the state

How to disable checkboxes using their class name?

jan — Wed, 20 Apr 2022 07:14:13 +0000

I am having a set of '6' checkboxes and all these are in img format, a class name is assigned to them i.e, "re-lbl-normal-12". Now I want to disable '3' checkboxes with Id's "1,2,6". I want to disable them using their class name. How can I do this?

javascript #reactjs

Want to Disable the checkboxes / grey them out.

jan — Wed, 20 Apr 2022 05:41:15 +0000

I have a list which consists of checkboxes. My requirement is based on another array called options. My option array has 3 elements and for the first option all the checkboxes should be available, so I can check them based on my requirement. But for the remaining 2 options I have to disable a few checkboxes based on their Id's.

if(event.value == 5){
var opt = this.state.checkoxesArray
{
opt = opt.map((obj) =>
{
if(obj.id === 1 || obj.id === 4 || obj.id === 6)
{
obj.disable = true;

                }
                return obj;
            }

This is how I disabled for my remaining 2 options. Here as of now I am unable to check a few checkboxes for value '5'. But I want to grey it out or remove them, for 2 options and enable all these for 1 option.

I am new to react. Thanks in advance.