Issue Removing specific React jsx element from list of elements

user_16110341 0
Viewed 70

first time asking questions haha, I'm trying to remove a specific JSX element from my array of elements but I am not sure how to identify said element is the one being clicked to get removed so I wanted to know if anyone encountered this issue before and how you would go about solving it.

This is the code for the input Container

const InputComponent = (props) => {

    

    return ( 
        <div className="input-container" onClick={e =>console.log(e)}>
            <input className="input-name" type="text" />
            <input className="input-value" type="text" />
            <button className="remove-button" onClick={props.remove}><img src={minusIcon} alt="remove-icon" /></button>
        </div>
     );
}
 
export default InputComponent;

and this is the code for the parent component to manage the removal of said element

const Main = () => {

    const [newInput, setInput] = useState([]);
    const [currentInput, setCurrentInput] = useState([<InputComponent key={0}/>]);

    const [currentIndex, setIndex] = useState(0)
    
    const [currentPlanName, setCurrentPlanName] = useState('Current-Plan');
    const [newPlanName, setNewPlanName] = useState('New-Plan');

    // const [currentInputValue, setCurrentValue] = useState('')

    // const [newInputValue, setNewValue] = useState('')

    // Sets Keys for each New Element in Array
    const [newKey, setNewKey] = useState(0);

    const [currentKey, setCurrentKey] = useState(0)


    // Handle Removal of specific array by using key
    
    const handleCurrentRemoval = () => {

        let newArray = currentInput.filter(element => element.key !== )

        console.log(newArray)
        setCurrentInput(newArray)

    }

    // Initialize Keys for each Array
    const currentArrayElement = {
        element: <InputComponent key={currentKey} remove={handleCurrentRemoval} />,
        index: currentKey

    };

    const newArrayElement = <InputComponent key={newKey+1}/>





    // Adds new Element to array
    const handleCurrentClick = () => {

        setCurrentInput(prevValues => [...prevValues, currentArrayElement.element])
        setCurrentKey(currentKey+1);
        console.log(currentArrayElement)
        console.log(currentInput)

    };

    const handleNewClick = () => {

        setInput(prevValues => [...prevValues, newArrayElement])
    };

    // const handleRemoveClick = (value) => {
    //     currentInput.filter(current => value !=)
    // }


    return ( 
        <div className="main-container">
            <div className="quote-container">

                <div className="current-plan">
                    <h2>{currentPlanName}</h2>
                    {
                        currentInput.map((inputs) => {
                            return inputs
                        })
                    }
                    <div className="button-container">
                        <button className="add-input" onClick={handleCurrentClick}><img src={addIcon} alt="add"/></button>
                    </div>
                    
                </div>
                
                <div className="new-plan">
                    <h2>{newPlanName}</h2>
                    {
                        newInput.map((inputs) => {
                            return inputs
                        })
                    }

                    <div className="button-container">
                        <button className="add-input" onClick={handleNewClick}><img src={addIcon} alt="add"/></button>
                    </div>
                </div>
            </div>
    
        </div>
     );
}
 
export default Main;

I do apologize in advance if I posted this incorrectly. Thank you for your assistance

jsx reactjs javascript
1 Answers

I think you've made this entirely more complex than it needs to be with all the index value storage in state. It is also anti-pattern in React to store JSX in state, you should store data in state and render the data to JSX.

I suggest storing generated input ids in the arrays instead and mapping these to JSX.

Example:

// id generator
let id = 0;
const getId = () => id++;

export default function App() {
  const [newInput, setInput] = useState([]);
  const [currentInput, setCurrentInput] = useState([]);

  const [currentPlanName, setCurrentPlanName] = useState("Current-Plan");
  const [newPlanName, setNewPlanName] = useState("New-Plan");

  // Handle Removal of specific element by using id
  const handleCurrentRemoval = (removeId) => {
    setCurrentInput((ids) => ids.filter((id) => id !== removeId));
  };

  // Adds new id to array
  const handleCurrentClick = () => {
    setCurrentInput((ids) => ids.concat(getId()));
  };

  const handleNewClick = () => {
    setInput((ids) => ids.concat(getId()));
  };

  const handleRemoveClick = (removeId) => {
    setInput((ids) => ids.filter((id) => id !== removeId));
  };

  return (
    <div className="main-container">
      <div className="quote-container">
        <div className="current-plan">
          <h2>{currentPlanName}</h2>
          {currentInput.map((id) => {
            return (
              <InputComponent
                key={id}
                remove={() => handleCurrentRemoval(id)}
              />
            );
          })}
          <div className="button-container">
            <button className="add-input" onClick={handleCurrentClick}>
              <img src={addIcon} alt="add" />
            </button>
          </div>
        </div>

        <div className="new-plan">
          <h2>{newPlanName}</h2>
          {newInput.map((id) => {
            return (
              <InputComponent key={id} remove={() => handleRemoveClick(id)} />
            );
          })}

          <div className="button-container">
            <button className="add-input" onClick={handleNewClick}>
              <img src={addIcon} alt="add" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Edit issue-removing-specific-react-jsx-element-from-list-of-elements

user_86908570
Related