Hi im trying to learn react by doing a simple block notes.

`import React from 'react';
import './style.css'
import { Tnote } from '../../types.ts/commonTypes';

interface anyProps {
    data: Tnote[]
    onSelectedNote: (note: Tnote) => void
}

function Aside(props: anyProps) {

return (
    <div className='notesname'>
        <div>
            {props.data.map((item)=>
            <div key={item.id} className='nota' onClick={()=> props.onSelectedNote(item)}>{item.titolo}</div>)}
        </div>
        <button className='newnote'>Nuova Nota</button>
    </div>
  );
}

export default Aside;

This is my aside component i want that when i click on the button “newnote” the text from textArea is pushed into an array how can i do this

`import React, { useEffect, useState } from 'react';
import './style1.css'
import { Tnote } from '../../types.ts/commonTypes';



function Textarea(props:{
    nota: Tnote | null
}) {

  const [text, setText] = useState(props.nota?.contenuto || "") 
  const [title, setTitle] =useState(props.nota?.titolo || "")

  
   useEffect(() => {
      setText(props.nota?.contenuto || "")
      setTitle(props.nota?.titolo || "")
  }, [props.nota])


return (
  <div className='titlecont'>
    <textarea placeholder='Inserici il titolo della tua nota' id='title' value={title} onChange={(e) => setTitle(e.target.value)}></textarea>
    <textarea placeholder='Inserisci il testo della tua nota..' id='content' value={text} onChange={(e) => setText(e.target.value)}></textarea>
  </div>
  );
}

export default Textarea;

This is my textArea

Any tips and advice are accepted since i really want to learn React

I tried a simple onClick on the button but it didn’t work