How to show or hide a particular Textfield inside loop react-CodePudding

If button clicked show particular element textfield and remaining elements show labels, if clicked again show all labels and hide that particular textfield, how to do this inside map function

let posts = [{id:1, content:'Apple'}, {id:2, content:'Grapes'}, {id:3, content:'Orange'},
{id:4, content:'Banana'}]

function showTextField(){

}

{ posts && posts.map(item=> <>

 <button onClick={showTextField}> edit </button>
 <label> {item.content} </label>
 <TextField /> 
}

CodePudding user response：

You can try to save the id of pressed item to display or not the textfield based on a state array.

 const [selected, setSelected] = React.useState([]);
  let posts = [
    { id: 1, content: "Apple" },
    { id: 2, content: "Grapes" },
    { id: 3, content: "Orange" },
    { id: 4, content: "Banana" }
  ];
  const showTextField = (id) => {
    const index = selected.indexOf(id);
    if (index === -1) setSelected([...selected, id]);
    else {
      const splicedArray = selected.filter((item) => item !== id);
      setSelected(splicedArray);
    }
  };

  return (
    <div className="App">
      {posts &&
        posts.map((item) => (
          <>
            <button onClick={() => showTextField(item.id)}> edit </button>
            <label> {item.content} </label>
            {selected.indexOf(item.id) !== -1 && <TextField />}
          </>
        ))}
    </div>
  );
}

CodePudding user response：

You can use react components and useState react hook to get this implemented. This is a TextField.jsx component and needs to be imported in your App.jsx

{import React, { useState } from "react";

function TextField(props){
  const [show, setShow]= useState(false);
  function changer(){
    setShow(!show);
  }
  return <form onSubmit={(e)=>e.preventDefault()}>  
     <button onClick={changer}> edit </button>
      <label> {props.content} </label>
  {show && <textarea id={props.id} cols="30" rows="10"></textarea>}
  </form>
}
export default TextField;

Inside your App.js

import "./styles.css";
import React from "react";
import TextField from "./TextField";
let posts = [{id:1, content:'Apple'}, {id:2, content:'Grapes'}, {id:3, content:'Orange'},
{id:4, content:'Banana'}];

function App() {
  return <div> 
    {posts.map((i)=>{
    return <div>
       <TextField  content= {i.content} id={i.id}/> 
           </div>
    })}
  </div>;
}
export default App;

Components are mostly used for such things . And we are using conditional rendering using && to render a component based on a condition. Here we check if the "show" is true or false and based on its value we render the textarea.

CodePudding user response：

I am using the state variable (i.e. selectedId) to store the selected post id. If the selectedId is equal to the selected post id, then mean the item is clicked again, then hide it else show it.

Here is my solution:

import React, { useState } from 'react';
import axios from 'axios';

export default function GG() {
  let posts = [
    { id: 1, content: 'Apple' },
    { id: 2, content: 'Grapes' },
    { id: 3, content: 'Orange' },
    { id: 4, content: 'Banana' },
  ];
  const [selectedId,setSelectedId ] = useState(0);
  let showTextField = (postId) => {  
    if (selectedId === postId) {
      setSelectedId(0);
    } else {
      setSelectedId(postId);
    }
  };
  
  return (
    <div>
      {posts.map((post) => (
        <div>
          <button onClick={() => showTextField(post.id)}> edit </button>
          <label> {post.content}:</label>          
          {(selectedId === post.id) && <TextField />}
        </div>
      ))}
    </div>
  );
}