1

não tenho muita experiência com reactjs, mas estou fazendo um projeto que utiliza essa lib, tendo como linguagem typescript. O problema é o seguinte, até antes deu utilizar um map para renderizar o elementos de um array em tela estava dando certo, a partir do momento que inseri o map com o array comecei a ter o seguinte problema, quando digito em um textarea todos são acionados ao mesmo instante e possuem o mesmo conteúdo e ainda não consigo salvar o conteúdos segue o código...

import React, { ChangeEvent, FormEvent, useState, useEffect } from 'react';
import api from '../../../../../services/api';
import { TComent, TPost } from '../../../../../utils/types/types';

import Panel from '../../Panel';

import {
  Container,
  Row,
  PostImage,
  Separator,
  Avatar,
  Column,
  LikeIcon,
  CommentIcon,
  ShareIcon,
  SendIcon,
} from './styles';

const FeedPost: React.FC = () => {

  const [contentFeedPost, setContentFeedPost] = useState<TPost[]>([])
  const [formData, setFormData] = useState({
    contents: ''
  })

  useEffect(() => {
    api.get<TPost[]>('groups_page/posts/1').then(response => {
      setContentFeedPost(response.data)
    })
  },[])

  async function handleSubmit(event: FormEvent) {
    event.preventDefault()

    const {
      contents
    } = formData

    setFormData({
      contents: ""
    })

    const data = {
      contents
    }

    await api.post('groups_page/coments/1/1', data)

  }

  function handleTextAreaChange(event: ChangeEvent<HTMLTextAreaElement>) {

    const { name, value } = event.target

    setFormData({
      ...formData,
      [name]: value
    })

  }

  return (
    <form onSubmit={handleSubmit} >
      {contentFeedPost.map((post) => (

        <>
          <Panel>
            <Container>
              <Row className="heading">
                <Avatar src={post.user.image_url} alt="Member" />
                <Column>
                  <h3>{post.user.name}</h3>
                  <h4>Engenharia de Computação</h4>
                  <time>{post.date}</time>
                </Column>
              </Row>

              <Row>
                <Separator />
              </Row>

              <Row>
                <p>
                  {post.contents}
                </p>
              </Row>

              <Row>
                <Separator />
              </Row>

              {post.attachment
                ?
                <PostImage
                  src={post.attachment.url}
                  alt="Attachment"
                />
                : null
              }

              <Row className="likes">
                <span className="circle blue" />
                <span className="circle green" />
                <span className="circle red" />
                <span className="number">49</span>
              </Row>

              <Row>
                <Separator />
              </Row>

              <Row className="actions">
                <button>
                  <LikeIcon />
                  <span>Gostei</span>
                </button>
                <button>
                  <CommentIcon />
                  <span>Comentar</span>
                </button>
                <button>
                  <ShareIcon />
                  <span>Compartilhar</span>
                </button>
                <button>
                  <SendIcon />
                  <span>Enviar</span>
                </button>
              </Row>

              <Row>
                <Separator />
              </Row>

              <Row>
                <Avatar src="https://github.com/fsluizvictor.png" alt="Rocketseat" />
                <textarea
                  id={String(post.id)}
                  name="contents"
                  placeholder="Insira um comentário..."
                  value={formData.contents}
                  onChange={handleTextAreaChange}
                />
                <button>
                  <SendIcon />
                </button>
              </Row>

              <Row>
                <Separator />
              </Row>

              {post.coments.map((coment: TComent) => {
                <Row className="coment">
                  <Avatar src={coment.user.image_url} alt="Member" />
                  <Column>
                    <h3>{coment.user.name}</h3>
                    <h4>Engenharia de Computação</h4>
                    <time>{coment.date}</time>
                  </Column>
                  <p>{coment.contents}</p>
                </Row>
              })}

              <Row>
                <Separator />
              </Row>

            </Container>
          </Panel>
        </>
      ))}
    </form>
  );
};

export default FeedPost;```

1 Resposta 1

0

O que é necessário fazer para ter estados independentes das textareas?

Para conseguir editar cada post individualmente é necessário cada um ter o seu próprio estado.

Uma forma de fazer isso é representando um array dentro do useState

Cada item do array será um objecto com uma propriedade contents.

Inicialização: const [formData, setFormData] = useState([])

Criação dos items:

 useEffect(() => {
    api.get<TPost[]>('groups_page/posts/1').then(response => {
      setContentFeedPost(response.data)
      setFormData(response.data.map(() => ({content:''})))
    })
  },[])

handleTextAreaChange:

 const handleTextAreaChange = (postIndex: number) => (event: ChangeEvent<HTMLTextAreaElement>) => {

    const { name, value } = event.target

    setFormData(
      formData.map(
         (postData, i) => i !=== postIndex 
             ? postData
             : {...postData, [name]: value}
    ))
  }

map do contentFeedPost: { contentFeedPost.map((post, i) => (

uso no textarea:

 <textarea
   id={String(post.id)}
   name="contents"
   placeholder="Insira um comentário..."
   value={formData[i].contents}
   onChange={handleTextAreaChange(i)}
 />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .