Skip to main content
removeu 20 caracteres do conteúdo
Fonte Link
import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'http://dev.4all.com:3050/messages''urldemessages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;
import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'http://dev.4all.com:3050/messages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;
import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'urldemessages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;
tags editadas
Link
vinicius
  • 21,7mil
  • 18
  • 85
  • 152
adicionou 2003 caracteres ao conteúdo
Fonte Link

UPDATE: ./src/chat/Chat.js Syntax error: C:/Users/henri/Desktop/funcionando/my-app/src/chat/Chat.js: Unexpected token (43:16)

import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'http://dev.4all.com:3050/messages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;

UPDATE: ./src/chat/Chat.js Syntax error: C:/Users/henri/Desktop/funcionando/my-app/src/chat/Chat.js: Unexpected token (43:16)

import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'http://dev.4all.com:3050/messages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;
Fonte Link
Carregando