React Js : How can i use index number to disable button ( if index = 4 then disable button )

Question

enter image description here i have to create a component where one person can add upto 4 addresses for doing this i have used slice(0,4) in map function but i have to make button disabled when 4 addresses are entered

How can i do this i need a solution

enter image description here

Welcome to SO. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask), and this [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist). Code that you have worked on to solve the problem should include a [mcve], and be included in your question. [Here's some documentation on how to create a React snippet](https://meta.stackoverflow.com/a/338538/1377002). — Andy, Apr 10 '22 at 18:12
Don't use indices. Your buttons are "things", they exist for a reason, so update your state based on user input, and then just make sure to render a new virtual dom with whatever the tree needs to look like (with `key` attributes, of course, so that React can do all the "which bits to keep, which bits to throw away, which bits to modify-in-place"). You are responsible for saying what things should look like, and React is responsible for updating the UI accordingly. Don't try to do React's job in your own code =) — Mike 'Pomax' Kamermans, Apr 10 '22 at 19:05

Cheshiremoe · Answer 1 · 2022-04-10T19:01:53.393

0

I think you looking for something like this in your return statement:

        <Button
          className="btn-info btn-sm"
          type="button"
          onClick={(e) => clicked(e)}
          disabled={locations.length >= 4}
        >
          Add Address
        </Button>

I think you want to use map.size() for the number of addresses in your disable conditional instead of index.

Note that I have been using Bootstrap components so the button is a drop-in widget. If your not using a UI widget library then you should consider it to make things easier.

edited Apr 10 '22 at 19:01

answered Apr 10 '22 at 18:16

Cheshiremoe

792
1
5
14

i have attached what i have to do is all i have to do within map function {locations.slice(0, 4).map((location, index) => ( use that index value to toggle buttons state such that if index=== 4 then button disabled if less than 4 button enabled – Shreyash Giri Apr 10 '22 at 18:18
or how can i export index number from map function – Shreyash Giri Apr 10 '22 at 18:20
i am quite confused is there any way we could connect verbally i really need help – Shreyash Giri Apr 10 '22 at 18:26
I have been editing my answer several times. Please look at it again and explain what part your confused about. I don't think you want to use the index of the last location, locations size is a much easier to access out side of the map function. Is the location variable an array? – Cheshiremoe Apr 10 '22 at 18:41
yeah its an array – Shreyash Giri Apr 10 '22 at 18:43
then you can simply use locations.length to get the number of items in the array. – Cheshiremoe Apr 10 '22 at 19:01

Marin Filipov · Accepted Answer · 2022-04-10T18:51:15.997

0

if(locations.length < 4) { <button type="button"> Add </button> } So basically the button will appear or dissapear based on if the condition is true or false.

edited Apr 10 '22 at 18:51

answered Apr 10 '22 at 18:21

Marin Filipov

16
2

thank you for this but what if button is outside of map function is it possible to export index number out of map function?? – Shreyash Giri Apr 10 '22 at 18:22
Are you filling an array of addresses? – Marin Filipov Apr 10 '22 at 18:24
i am quite confused is there any way we could connect verbally i really need help – Shreyash Giri Apr 10 '22 at 18:26
I cannot right now but if you give some more details on how do you want your component to work maybe i can help you. So first question is if you want to submit all four addresses at once or 1 at a time? – Marin Filipov Apr 10 '22 at 18:28
let me tell scenario i have to create a page where person can add 4 addresses and after adding fourth address the input and buttons should be hidden when user deletes one address from four of the added one then input and button reappears – Shreyash Giri Apr 10 '22 at 18:28
please guide me to best practice for doing this – Shreyash Giri Apr 10 '22 at 18:29
So you can basically use the length of the array of addresses as condition instead of index. That way you can check how many addresses are already saved. – Marin Filipov Apr 10 '22 at 18:30
wait i am adding UI images it would be more clear – Shreyash Giri Apr 10 '22 at 18:30
You can go through the UI and Code images then you can understand what i am trying to do – Shreyash Giri Apr 10 '22 at 18:34
So you just need to wrap your inputs and the buttons you want to hide in an if statement where you check the "locations.length < 4" so if it is less than 4 they will appear but if it is equal or more than 4 they will dissapear. – Marin Filipov Apr 10 '22 at 18:40
yeah it is, but the thing is button and input lies outside the map function – Shreyash Giri Apr 10 '22 at 18:41
The map function is used only to display all of the addresses in the array. You do not need it for the if statement. The length of the array should dinamically change when you add or delete address. – Marin Filipov Apr 10 '22 at 18:44
so i can show hide buttons via location(array) length is it correct?? – Shreyash Giri Apr 10 '22 at 18:45
irrespective of map function – Shreyash Giri Apr 10 '22 at 18:45
Yes, just try it out with a simple if statement and comment if it worked. – Marin Filipov Apr 10 '22 at 18:46
ohh my god how fool i am, Thank you so much Marin i was just doing it from 13 Hours it worked !!! Thank You So Much. – Shreyash Giri Apr 10 '22 at 18:49
You are welcome! I will appreciate it if you upvote my comment. Good luck at what you are doing! – Marin Filipov Apr 10 '22 at 18:50
I wish i could but my reputation is not enough to do this please can you drop your email so we could be in touch – Shreyash Giri Apr 10 '22 at 18:51

React Js : How can i use index number to disable button ( if index = 4 then disable button )

2 Answers2