如何在reactjs中单击时从数组中添加和删除元素？

Question

I'm trying to create a function that renders an array of links and i want to create a text input and a button that adds value from input in the array. I got the links saved in the state in the object that looks like this:

sourceLinks: {
0: "https://www.w3schools.com/html/"
1: "https://www.apachefriends.org/docs/"
2: "https://docs.moodle.org/38/en/Windows_installation_using_XAMPP"
}

I've managed to render the links like this:

renderLinks() {
        
        let sessionLinks = this.state.sessionLinks;
        let links = [];
        Object.values(sessionLinks).map((link) => {
            links.push(<div className="column">
                <span>
                    <InputPreview inputValue={link} classes="w-300" />
                </span>
            </div>)
        })
        
        return links;

    }

InputPreview is the component i use for displaying links. I'm tryin to add a text input and a button bellow the rendered links that adds the value to the array, and an icon next to every link that removes it from an array. I'm trying to do it all in one function renderLinks() and then call it in render. I know i have to push and slice items from an array and update the state but i'm strugling cause i just started learning react. Please help :)

Answer 1

You can add and render links with below code.

import React from "react";

class ItemList extends React.Component {
  state = {
    links: ["item1"],
    newItem: ""
  };

  submit(e, newLink) {
    e.preventDefault();
    let updatedLinks = this.state.links;
    updatedLinks.push(newLink);
    this.setState({ links: updatedLinks });
  }

  render() {
    return (
      <React.Fragment>
        <ul>
          {this.state.links?.map((link, i) => (
            <li key={i}>
              <p>{link}</p>
            </li>
          ))}
        </ul>
        <form onSubmit={(e) => this.submit(e, this.state.newItem)}>
          <input
            type="text"
            value={this.state.newItem}
            onChange={(e) => this.setState({ newItem: e.target.value })}
          />
          <button type="submit">ADD</button>
        </form>
      </React.Fragment>
    );
  }
}

export default ItemList;

Let me know for further clarificaton.

Answer 2

This is a example with functional components and hooks

import React, { useState } from 'react';

const sourceLinks = [
  'https://www.w3schools.com/html/',
  'https://www.apachefriends.org/docs/',
  'https://docs.moodle.org/38/en/Windows_installation_using_XAMPP',
];

export const ListLinks = () => {
  const [links, setLinks] = useState(sourceLinks);
  const [newLink, setNewLink] = useState('');

  const handleAdd = () => {
    setLinks(links => [...links, newLink]);
  };
  const handleChangeNewLink = e => {
    const { value } = e.target;
    setNewLink(value);
  };
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <input type='text' value={newLink} onChange={handleChangeNewLink} />
        <button onClick={handleAdd}>Add</button>
      </div>
      <br />
      {links.map((link, index) => (
        <p key={index}>{link}</p>
      ))}
    </div>
  );
};

This is the result:

Lastly, read the documentation, managing the state is essential.