I want to change ComponentB atribute values from ComponentA (index currently).

My approach was to call lower component functions to change their state/values

import React from 'react'

class TaskComp extends React.Component{
 
    constructor(props){
        super(props);
        this.state = {
            name: "",
            starTime: 0,
            endTime: 0
        }
        this.changeState = this.changeState.bind(this)
        // this.changeState = this.changeName.bind(this)
    }
    
    changeState(newName, newStart, newEnd){
        // this.setState()
            this.state.name = newName
            this.state.starTime = newStart
            this.state.endTime = newEnd
        }
         
}

function changeName(newName){
    this.state.name = newName
}

function componentDidMount() {
    // this.setState(this.state)
}



function renderTask(){
    let task = new TaskComp()
    return <div> 
    
    <p>{Object.keys(task.state).map((key) => <div key={key}>{key} {task.state[key]}</div>)}</p>
    </div>
}


export default renderTask

E.g: Create a Task with name "Paul", data coming from another place like a TextField, DB...

When I try to do this it says changeName or changeState aren't functions. I assume because Tasks is returning a Div instead the actual class/object/data. I failed to access via props (assume it's read-only).

1.What JS/React concepts involve this problem (to study)

2.How to achieve the solution?