CODEWITHSUNDEEP
javascriptreactjsreact-hooksjsx
progpro
progpro

Reputation: 195

How to perform the operation on the specific index selected in the array in javascript react?

I have one array of objects and I want to show on specific index the field that I want that is a text box inside row of a table.

Example of array of object as shown below:

const [showComment, setShowComment] = useState(false);

const data = [
    {
      "owner": "Joe Alex",
      "createddate": "21/04/2022",
      "comment": "None",
      "lastmodifieddate": "png"
    },
    {
      "owner": "John Doe",
      "createddate": "21/04/2022",
      "comment": "02/04/2020",
      "lastmodifieddate": "png"
    },
    {
      "owner": "Rahul Sharma",
      "createddate": "21/04/2022",
      "comment": "Abc",
      "lastmodifieddate": "png"
    }
  ]


{data.map((value, id, abc) => {
 {showComment ?
                        <input type="text" name="" id="" placeholder="Enter comment" />
                        :
                        <div>{value.comment}</div>
                      }
  <div><Icon/></div>
   
}))

What I want is on the click of the icon by the help of the array index I want to show the the input textbox on the specific index selected. How can I do that?

Upvotes: 1

Views: 123

Answers (1)

Codenatial Developer
Codenatial Developer

Reputation: 318

You can set the id to showComment when you click on <Icon /> and then compare during map, also you are missing return()

const [showComment, setShowComment] = useState(-1);

const data = [
    {
      "owner": "Joe Alex",
      "createddate": "21/04/2022",
      "comment": "None",
      "lastmodifieddate": "png"
    },
    {
      "owner": "John Doe",
      "createddate": "21/04/2022",
      "comment": "02/04/2020",
      "lastmodifieddate": "png"
    },
    {
      "owner": "Rahul Sharma",
      "createddate": "21/04/2022",
      "comment": "Abc",
      "lastmodifieddate": "png"
    }
  ]

  data.map((value, id) => {

    return (
        {id == showComment 
           ? <input type="text" name="" id="" placeholder="Enter comment" />
           : <div>{value.comment}</div>
        }
        <div><Icon onClick={()=> setShowComment(id)}/> </div>
    )

  }))

Upvotes: 1

Related Questions