Ajouter des élément dans une liste de choix

bonsoir
j'ai une liste de choix , dans le cas ou je veux a jouter un choix non existant dans la liste !! c'est ma question
plusieurs idée ont été essayé, dommage sans succès.
comment a jouter un input a la fin de ma liste déroulante, et dans le cas ou je duplique la ligne , donc tous ce duplique;
des suggestion svp

merci pour votre aide

mon exemple, voici tous les element de mon code:
dans le dossier src:

index.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import ReactDOM from "react-dom";
import Liste1 from "./components/liste1";
import "./styles.css";
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Liste1 />
      </header>
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

dans le dossier components qui est a l'intérieur de dossier src:
components: existe deux fichier .js

listchoix.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from "react";
const Listchoix = (props) => {
  return props.Details.map((val, idx) => {
    let type0 = `type0-${idx}`,
      type1 = `type1-${idx}`,
      // dateOfPublish = `dateOfPublish-${idx}`,
      type2 = `type2-${idx}`,
      type4 = `type4-${idx}`;
    return (
      <div className="form-row" key={val.index}>
        <div className="col">
          <label>Type0</label>
          <select
            className="form-control"
            name="type0"
            id={type0}
            data-id={idx}
            style={{ width: 850 }}
          >
            <option>Select</option>
            <option>choice1</option>
            <option>choice2</option>
            <option>choice3</option>
            <option>choice4</option>
            <option>choice5</option>
          </select>
        </div>
        <div className="col"></div>
        <div className="col"></div>
 
        <div className="col"></div>
        <div className="col p-4">
          {idx === 0 ? (
            <button
              onClick={() => props.add()}
              type="button"
              className="btn btn-primary text-center"
            >
              <i className="fa fa-plus-circle" aria-hidden="true" />
            </button>
          ) : (
            <button
              className="btn btn-danger"
              onClick={() => props.delete(val)}
            >
              <i className="fa fa-minus" aria-hidden="true" />
            </button>
          )}
        </div>
      </div>
    );
  });
};
export default Listchoix;

et

liste1.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from "react";
import Listchoix from "./listchoix";
 
class Liste1 extends React.Component {
  state = {
    Details: [
      {
        index: Math.random(),
        Type0: "",
      },
    ],
  };
  handleChange = (e) => {
    if (["Type0"].includes(e.target.Type0)) {
      let Details = [...this.state.Details];
      Details[e.target.dataset.id][e.target.Type0] = e.target.value;
    } else {
      this.setState({ [e.target.Type0]: e.target.value });
    }
  };
  addNewRow = (e) => {
    this.setState((prevState) => ({
      Details: [
        ...prevState.Details,
        {
          index: Math.random(),
          Type0: "",
        },
      ],
    }));
  };
 
  deteteRow = (index) => {
    this.setState({
      Details: this.state.Details.filter((s, sindex) => index !== sindex),
    });
  };
 
  clickOnDelete(record) {
    this.setState({
      Details: this.state.Details.filter((r) => r !== record),
    });
  }
  render() {
    let { Details } = this.state;
    return (
      <div className="content">
        <form onSubmit={this.handleSubmit} onChange={this.handleChange}>
          <div className="row" style={{ marginTop: 20 }}>
            <div className="col-sm-1" />
            <div className="col-sm-10">
              <h2 className="text-center"> choice </h2>
              <div className="container">
                <div className="row">
                  <Listchoix
                    add={this.addNewRow}
                    delete={this.clickOnDelete.bind(this)}
                    Details={Details}
                  />
                </div>
              </div>
            </div>
            <div className="col-sm-1" />
          </div>
        </form>
      </div>
    );
  }
}
export default Liste1;

pour le fichier styl.css existant a l'interieur de dossier src
styles.css:

Code:

1
2
3
4
.App {
  font-family: sans-serif;
  text-align: center;
}

pour fichier pack json existant dans le projet
package.json:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "dynamically-add-and-delete-input-fields-in-form-using-react-js",
  "version": "1.0.0",
  "description": "Add and Delete  Input from form ",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

et image :

Pièce jointe 614064

merci a vous tous