Как я могу изменить свойства компонентов React?

Question

Я новичок в React и недавно начал над ним работать. Я знаю, что мы не можем изменить свойства компонентов с помощью реквизита.

Я хочу знать, как мы можем изменить свойства компонента? Ниже мой код:

Courses.jsx

function Courses(){


return (
    <div className="courses">
        <h1>Ongoing Courses</h1>
        <div className="row">
        
        {CourseData.map((value,index)=>{
            return   (
              
                  <div className="col-md-3">
                  <Card title={value.title}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
                  </div>
             
            );
        })}
    </div>
    </div>
);
}

Здесь у меня есть массив данных с именем courseData, я отображаю его на компонент Card.

Card.jsx:

function Card(props){

function handleClick(){
  
}
return (
    <div className="card">
        <div className="card-body">
            <h2 className="card-title">{props.title}</h2>
            {props.content}
            <br/>
        <button  className="btn btn-danger" > {props.value}</button>
        </div>
    </div>
);
}

CourseData имеет следующие свойства:

courseData : [{
key, 
title,
completed
content}]

Я просто хочу, чтобы когда когда-либо была нажата кнопка, карта была нажата, а завершенный атрибут courseData изменился на какое-то другое значение, которое передается через реквизиты.

Я много пробовал, но не смог.

Любая помощь по этому поводу будет полезна для меня.

courseData .jsx:

const notes = [{
key: 1,
title: "some Text",
completed:false,
content: "some Text"
},
 {
    key: 2,
   title: "some Text",
completed:false,
content: "some Text"
 }]
export default notes;

Answer 1

Добавить CourseData в состояние компонента Courses. Затем добавьте метод корректировки данных там. Передайте метод через свойства, которые будут вызываться при нажатии кнопки в компоненте Card:

function Courses() {
  const [courseData, setCourseData] = useState(CourseData);
  const updateCourseData = (index) => {
    courseData.splice(index, 1);  
    setCourseData(courseData);
  }

  return (
    <div className="courses">
      <h1>Ongoing Courses</h1>
      <div className="row">
    
      {courseData.map((value,index)=>{
        return   (
          
              <div className="col-md-3">
              <Card title={value.title} updateCourseData={updateCourseData}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
              </div>
         
          );
      })}
      </div>
      </div>
   );
}

в Card.jsx:

<button onClick={() => props.updateCourseData(props.id)}  className="btn btn-danger" > {props.value}</button>

Answer 2

function Courses(){
const [coursesData, setCoursesData] = useState(CourseData)

return (
    <div className="courses">
        <h1>Ongoing Courses</h1>
        <div className="row">
        
        {coursesData.map((value,index)=>{
            return   (
                  <div className="col-md-3">
                  <Card coursesData={coursesData}  setCoursesData={setCoursesData} title={value.title}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
                  </div>
            );
        })}
    </div>
    </div>
);

function Card({id,title,value,content,coursesData,setCoursesData }){

function handleClick(e){
  e.preventDefault()
  setCoursesData(coursesData => {
      const data = coursesData
      data.splice(id,1,{
          title: title,
          completed: value,
          content: content,
          key: id
      })
      return data
  })
}
return (
    <div className="card">
        <div className="card-body">
            <h2 className="card-title">{title}</h2>
            {content}
            <br/>
        <button onClick={handleClick} className="btn btn-danger">{value}</button>
        </div>
    </div>
);