How can i code this function for take the value of article?

Question

Tentei capturar o valor de um article usando uma função de click e setando a variável, mas o valor da variável não altera, permanece sempre o mesmo. Como posso resolver?

import api from '../../services/api';
import { useEffect, useState } from 'react';
import './home.css'


export default function Home(){
const [filmes, setFilmes] = useState([]);
const [title, setTitle] = useState('');

    useEffect(()=>{
        async function loadFilmes(){
            const response = await api.get('movie/now_playing?', {
                params:{
                    api_key:'myApiKey123456',
                    language: 'pt-BR',
                    page: 1,
    
                }
            })
            setFilmes(response.data.results);
        }
        loadFilmes();
        console.log(filmes);
        
    },[]);


    return(
        <div>
            <h1>teste → {title}</h1>
            <div className="slider">
                {filmes.map(filme=>{
                    return(<article key={filme.id} value={filme.title} onClick={e=>setTitle(e.target.value)}>
                        <h3>{filme.title}</h3>
                        <img className='poster' src={`https://image.tmdb.org/t/p/original${filme.poster_path}`} alt={filme.title}/>
                    </article>)
                })}
            </div>
        </div>
    )
}

Answer 1

article tag hasn't value attribute. So if you reach your purpose, change the article tag to the button or ...

Anyway, you should change it to the tag which has value attribute.

Or, you should change your code like this:

return(<article key={filme.id} onClick={setTitle(filme.title)}>
          <h3>{filme.title}</h3>
          <img className='poster' src={`https://image.tmdb.org/t/p/original${filme.poster_path}`} alt={filme.title}/>
       </article>)

Good luck.