如何在反应中将参数作为参数发送回函数传递

Question

I am new to react.js and find it difficult to understand the parent child component communication. I have a Stateful component, call cookpit and a Stateless component call Schedule. I am passing a change function to Schedule from cookpit as props.

state = {
        schedule : [
            {
                id:'01',
                shift:"Morning UpStairs",
                Monday:'X1',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },
            {
                id:'02',
                shift:"Morning Down Stairs",
                Monday:'X2',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },
            {
                id:'03',
                shift:"Morning Parking Lot",
                Monday:'',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },

        ],
    };
let mapSchedule = this.state.schedule.map((item,i)=>{
            return <Schedule schedule={item} key={item.id} changed={(event,day)=>this.onEmpChanged(event,item.id,day)}/>
        });

In Schedule component I want set values to the each day of the state object.

<Col>
                    <select value={props.schedule.Monday} onChange={props.changed('monday')}>
                        <option value=""></option>
                        <option value="X1">X1</option>
                        <option value="X2">X2</option>
                        <option value="X3">X3</option>
                        <option value="X4">X4</option>
                        <option value="X5">X5</option>
                        <option value="X6">X6</option>
                        <option value="X7">X7</option>
                    </select>
                </Col>

I am trying to pass the day to the parent with the change action so that I know which date should be updated , but its not working. please correct me.

Answer 1

in the Parent component

  changed = (day,item)=>{
    console.log(item.id,day)
}
render() {

    return(
        
        <div>
            {
                      this.state.schedule.map(item=> <Schedule schedule={item} key={item.id} changed={this.changed}/>
                    )
            }
        </div>
        )
}

and in the child component

export default function Schedule(props) {
return (
    <div>
        
                <select value={props.schedule.Monday} onChange={()=>props.changed('monday',props.schedule)}>
                    <option value=""></option>
                    <option value="X1">X1</option>
                    <option value="X2">X2</option>
                    <option value="X3">X3</option>
                    <option value="X4">X4</option>
                    <option value="X5">X5</option>
                    <option value="X6">X6</option>
                    <option value="X7">X7</option>
                </select>
        
    </div>
)

}