score:1

Accepted answer
value={this.state.responseMessage[message._id] || ""}

score:1

<Form.Input 
  name={message._id} 
  value={this.state[message._id] || ""} 
  onChange={this.handleInputChange} 
  placeholder="Enter your response" 
/>

score:2

class Reply extends Component {
  state = {
    responseMessage: "",
  };
  handleInputChange = (value) => {
    this.setState({
      responseMessage: value,
    });
  };
  render() {
    const { onSend } = this.props;
    <Form reply>
      <Form.Input
        value={this.state.responseMessage}
        onChange={this.handleInputChange}
        name="responseMessage"
        placeholder="Enter your response"
      />
      <Button
        content="Send Message"
        labelPosition="left"
        icon="edit"
        color="teal"
        onClick={() => onSend(this.state.responseMessage)}
      />
    </Form>;
  }
}

class Messages extends Component {
  constructor(props) {
    super(props);
    this.loadMessages = this.loadMessages.bind(this);
    this.state = {
      messages: [],
      responseMessage: "",
      displayReplyBox: false,
    };
  }

  componentDidMount() {
    console.log("Props from component mount", this.props);
    this.loadMessages();
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

  loadMessages = () => {
    console.log("UserID IS", this.props.userId);
    API.getMessages(this.props.userId)
      .then((res) => {
        this.setState({ messages: res.data });
        console.log(this.state.messages);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  render() {
    const { isLoggedIn, userId, email, zipCode } = this.props;
    console.log("props in user dashboard", this.props);
    if (!isLoggedIn) {
      return <Redirect to="./Login" />;
    }
    return (
      <GFGContainer>
        <Header textAlign="center" color="teal" size="huge">
          My Messages
        </Header>

        {this.state.messages.map((message) => (
          <Comment.Group key={message._id}>
            <Comment fluid>
              <Comment.Content>
                <Comment.Author as="a">{message.senderName} : </Comment.Author>
                <Comment.Metadata></Comment.Metadata>
                <Comment.Text>{message.message}</Comment.Text>
              </Comment.Content>
            </Comment>
            <Reply onSend={(newMessage) => this.sendResponse(message._id, userId, message.sender, newMessage)} />
            <Divider horizontal>
              <Icon name="comments"></Icon>
            </Divider>
          </Comment.Group>
        ))}
      </GFGContainer>
    );
  }
}

export default Messages;


Related Query

More Query from same tag