I want to change the Text to input field when clicking on edit button. The Text is inside map function, The Code that I have worked is mentioned below

function test() {
  const [img, setImg] = useState(false)

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map(e => {
      return (
        {img ? (
          <input placeholder={e.name} />
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => setImg(true)}>edit</button>
          </div>
        )}
      )
    })}
  </>
)

In this code if i click on edit button, it actually shows input in all name, rather than which i click. i want to edit only one name, for example, if i want to edit name test 1, i dont want the input to show on test 2

I want to change the Text to input field when clicking on edit button. The Text is inside map function, The Code that I have worked is mentioned below

function test() {
  const [img, setImg] = useState(false)

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map(e => {
      return (
        {img ? (
          <input placeholder={e.name} />
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => setImg(true)}>edit</button>
          </div>
        )}
      )
    })}
  </>
)

In this code if i click on edit button, it actually shows input in all name, rather than which i click. i want to edit only one name, for example, if i want to edit name test 1, i dont want the input to show on test 2

• javascript
• reactjs

Share Improve this question Follow asked May 24, 2022 at 4:07 RANTO BERKRANTO BERK 3111 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Something like this would work -

function test() {
  const [img, setImg] = useState(-1)

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map((e, idx) => {
      return (
        {img==idx ? (
          <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => {
               setImg(idx)
              } 
             }>edit</button>
          </div>
        )}
      )
    })}
  </>
)

You can set a state when you click edit button, then use this state to conditionally show of input you want:

function test() {
  const [img, setImg] = useState(false)
  const [idEdit, setIdEdit] = useState(null); //<== Create this state

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map(e => {
      return (
        {img ? (
          <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => {
               setImg(true)
               setIdEdit(e.id) //<== set idEdit state here
              } 
             }>edit</button>
          </div>
        )}
      )
    })}
  </>
)

here is if you are using an API to update your profile I used the above answers and updated them to suite API I used axios to fetch and update the data. hope it helps I am using react.js and tailwind:

import axios from 'axios'
import React from 'react'
import {useEffect} from 'react'
import { useState} from 'react'

function Ex() {

const [img, setImg] = useState(false)
const [idEdit, setIdEdit] = useState(null);
const [data, setData] = useState({})

function data() {
axios.get(`api/${id)}`)
  .then((res) => {
    setData(res.data)
  })
}

useEffect(() => {
 data()
}, [])

function update() {
axios.put(`api/${data.id}`, {
  name: data.name,
  email: data.email
 })
setImg(false)
}

const save = (e) => {
setData({ ...data,
  [e.target.name]: e.target.value
})
}

return ( 
<div className = 'flex justify-center items-center w-screen h-screen' > 
 {img?
  <div className = 'grid grid-cols-1 gap-5   bg-black p-10  ' >
  <input className = 'rounded-xl border p-2'onChange = {save}
    name = 'name'
    value = { data.name}
    style = {{display: idEdit == data.id ? 'block' : 'none' }}/>  
  <input className = 'rounded-xl border p-2' onChange = {save}
  name = 'email'
  value = {data.email}style = {{display: idEdit == data.id ? 
  'block':'none'}}/> 
  <button onClick = {(() => update())}
  className = 'bg-amber-900 rounded-xl p-1 text-white' > Update </button> 
  </div>
   :
   <div className = 'grid text-white grid-cols-1 gap-5 bg-black p-10 
     rounded-xl'>
    <p className = 'text-xl' > Name: {data.name} < /p>
    <p className = 'text-xl' > Email: {data.email} < /p>
    < button className = 'bg-amber-900 mt-4 rounded-xl p-1  text-white'
    onClick = {() => {setImg(true) setIdEdit(data.id) }}> Edit < /button>
    </div>} 
   </div>
     )}

  export default Ex