how to change text to input field onclick in react?

Question

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

Answer 1

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>
        )}
      )
    })}
  </>
)

Answer 2

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>
        )}
      )
    })}
  </>
)