React todo list, move from incompleted to completed list with information on the same li - reactjs

Question

I am a beginner in react and need some help.
I have created a todo list which takes, the text,edit and remove button, a select menu a input box and a radio button. The list renders fine for the "in completed list".I am trying to move the following when the radio button is ticked to the "completed list". the text,the option on the select menu for that li aswell as the text for the last box (ticket number). At the moment this takes the todo item text and the last value selected for the select menu (regardless of the li selected). To make it clear this is a task list, the select menu will be a list of names that this task is assigned to, with a "ticket number" for that task. I need all this information on another array to be visual on the "completed list".
The "incompleted list" which is stored in the items state, only has a name. on clicking "complete" I need to pass the details from the select menu. How do i do this? At the moment i can pass the last edited select menu, but i need it to be specific to the li.
code can be found on https://codesandbox.io/s/9lj4mmon1o
import React, { Component } from 'react';
import Form from './Components/Form'
import './App.css';
import List from './Components/List'
import Completed from './Components/Completed'
class App extends Component {
constructor(props){
super(props)
this.state= {
isComplete:false,
isEditing:false,
text:"",
items:[],
completed:[]
}
this.submit=this.submit.bind(this);
this.eventHandler=this.eventHandler.bind(this)
}
submit=(e)=>{
e.preventDefault();
this.setState({
items:[
{
name:this.state.text,
},
...this.state.items
],
text:""
})
}
remove=(index)=>{
this.setState({
items:this.state.items.filter((_,i) => i!==index)
})
}
eventHandler=(e)=>{
this.setState ({
text:e.target.value
})
}
handleNameEdits=(e)=>{
this.setState({
text:e.target.value
})
}
myoptions=(option,indexToChange,name)=>{
this.setState({
webmaster:option
})
}
edit=(items,indexToChange)=>{
this.setState({
isEditing:!this.state.isEditing,
items:this.state.items.map((item,index)=>{
if(index== indexToChange){
return {name:this.state.text}
}
}),
text:""
})
}
onChange=(indexToChange,listName,)=>{
this.setState({
isComplete:!this.state.isComplete,
items:this.state.items.filter((_,i) => i!==indexToChange),
completed:[
{
name:listName.name,
webmaster:this.state.webmaster,
ticketId:this.state.ticketId
},
...this.state.completed
]
})
}
ticketId=(e)=>{
this.setState({
ticketId:e.target.value
})
}
render() {
return (
<div className="App">
<header className="App-header">
<Form submit={this.submit} myValue={this.state.text} eventHandler={this.eventHandler}/>
<h4 class="incompleted-title"> Incompleted Tasks </h4>
{this.state.items.map && this.state.items.map((item,index)=>(
<List key={index}
name={item.name}
edit={()=>this.edit(item,index)}
changeComplete={()=>this.onChange(index,item)}
remove={()=>this.remove(index) }
handleNameEdits={this.handleNameEdits}
myoptions={(e =>this.myoptions(e.target.value,index,item))}
isEditing={this.state.isEditing}
editText={this.state.changedtext}
ticketId={this.ticketId}
/>
))}
</header>
<div className="completed">
<h2>completed</h2>
{this.state.completed.length > 0 && (<Completed completed={this.state.completed}/>)}
</div>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Edit from './Edit';
class List extends Component {
constructor(props) {
super()
this.options = [
{name:'web1'},
{name:'web2'},
{name:'web3'},
{name:'web4'}
render() {
const {key} = this.props;
const x=this.options;
return (
<ul>
<li > <Edit handleNameEdits={this.props.handleNameEdits} isEditing={this.props.isEditing} editText={this.props.editText} /> <span className="li-text">{this.props.name}</span>
<div class="btn-group" role="group" aria-label="Basic example">
<button className='btn-style btn btn-info' onClick={this.props.edit}>{this.props.isEditing ? 'save':'edit'}</button>
<button className='btn btn-danger' onClick={this.props.remove}>Remove</button>
</div>
<select ref={this.props.Ref} class="select" onChange={this.props.myoptions}>{this.options.map(options => <option>{options.name}</option> )}
</select>
<label> Ticket Number </label><input type='text' onClick={this.props.ticketId} />
<label className='label'> Completed
</label><input type="checkbox" className="completedbox" onChange={this.props.changeComplete} />
</li>
</ul>
)
}
}
export default List;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Completed extends Component {
constructor(props){
super();
this.state = {
completed: props.completed
};
console.log(props);
}
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.completed !== prevProps.completed) {
this.setState({
completed: this.props.completed
});
}
}
render() {
return(
<ul>
{this.state.completed.map((list,index)=>(
<li className="list-group-item list-group-item-success" key={index}> `Task: {list.name} was completed by {list.webmaster} on ticket {list.ticketId}`</li>))
}
</ul>
)
}
}
// Completed.PropTypes={
// test:PropTypes.string.isRequired
export default Completed