1

Im having trouble with displaying the results of the function call await toxic("a toxic sentence"). The closest i could get was to see this update in the state of the component in react plugin however it did not update the component itself.

function ToxicLabels(theObject) {
  return (
  <h2>{theObject.label}  match {theObject.results[0].match}</h2>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      objects: [],
    }
  }

  componentDidMount() {
    this.renderThePost()
  }
  componentDidUpdate(){
    render()
  }

  renderThePost = async () => {
    try {
      let response = await toxic('you suck')
      this.setState({
        object: response,
      })
      // this.state.object.map((object)=>{
      //   console.log(object)
      //   ToxicLabels(object)
      // })
      }catch (err) {
        console.log(err)
      }
    }

  render() {
      return (
        <div>
          <h2>Hello {"Hola"}</h2>
          {this.state.object.map((object)=> {
            console.log(object)
            ToxicLabels(object)
            })}
        </div>
      )
    }
  }

The Structure of data returned. This is how TensorFlow's toxicity model returns data. There is 7 objects in the array. Inside the each object there is a label and an array of results which shows the match(true or false) and the probabilities.

{
  "object": [
    {
      "label": "identity_attack",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "insult",
      "results": [
        "{match: true, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "obscene",
      "results": [
        "{match: null, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "severe_toxicity",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "sexual_explicit",
      "results": [
        "{match: null, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "threat",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "toxicity",
      "results": [
        "{match: true, probabilities: Float32Array(2)}"
      ]
    }
  ]
}
12
  • 1
    not sure tho how to connect that with react.js because the data from the async call is passed into the state of the component however the component does not update
    – Sam
    Oct 25, 2020 at 16:07
  • You could map() over the data.
    – yudhiesh
    Oct 25, 2020 at 16:12
  • i do map over the data but it does not display component to which i passed the output
    – Sam
    Oct 25, 2020 at 16:13
  • Where is the code for toxic?
    – sin tribu
    Oct 25, 2020 at 16:21
  • Can you please show the structure of the data returned? Oct 25, 2020 at 16:21

2 Answers 2

2

This code works form me, just exclude the toxic function and use your own.

import React from "react"

const toxic = () => {
    return {
  "object": [
    {
      "label": "identity_attack",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "insult",
      "results": [
        "{match: true, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "obscene",
      "results": [
        "{match: null, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "severe_toxicity",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "sexual_explicit",
      "results": [
        "{match: null, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "threat",
      "results": [
        "{match: false, probabilities: Float32Array(2)}"
      ]
    },
    {
      "label": "toxicity",
      "results": [
        "{match: true, probabilities: Float32Array(2)}"
      ]
    }
  ]
}

}

function ToxicLabels(theObject) {
  return (
  <h2>{theObject.label}  match {theObject.results[0].match}</h2>
  )
}

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      render: false, 
      objects: [],
    }
  }

  componentDidMount() {
    this.renderThePost()
  }
  componentDidUpdate(){
    this.render()
  }

  renderThePost = async () => {
    try {
      let response = await toxic('you suck')
      console.log( response )
      this.setState({
        objects: response.object,
        render: true
      })
      // this.state.object.map((object)=>{
      //   console.log(object)
      //   ToxicLabels(object)
      // })
      }catch (err) {
        console.log(err)
      }
    }

  render() {
      if( !this.state.render ) { return <div></div> }
      return (
        <div>
          <h2>Hello {"Hola"}</h2>
          {this.state.objects.map((object) => {
            
            return ToxicLabels(object)
            })}
        </div>
      )
    }
  }
8
  • do i need to change anything if im to add user input from a field. All i need to do is pass the value as a prop to App component right?
    – Sam
    Oct 25, 2020 at 16:55
  • 1
    Yeah you'll definitely have to change something but I don't know how you're structuring you code. It sounds like a new question. I'm by no means an expert but I typically have App as my top component and pass props down to children from there.
    – sin tribu
    Oct 25, 2020 at 16:58
  • ohh i seee I shall do that, im fairly new to react. But the idea is to pass the value in as prop then run the async function right?
    – Sam
    Oct 25, 2020 at 17:00
  • 1
    It's actually not necessary in this case, but if you have state variables that don't get defined until componentDidMount the app could crash. As to the other question I don't know enough about what you are trying to do.
    – sin tribu
    Oct 25, 2020 at 17:03
  • 1
    Then have your form be a level above where you render Toxic Labels and pass it down as props or set the state after you get the user input. but honestly this is digressing quite a bit from the original question. Good luck!
    – sin tribu
    Oct 25, 2020 at 17:07
1

This could work out.

this.setState({
        objects: response.object,
      })
...
{this.state.objects.map((object)=> ToxicLabels(object))}
10
  • this on the console gives me object: undefined
    – Sam
    Oct 25, 2020 at 16:38
  • because response has label and an array inside it
    – Sam
    Oct 25, 2020 at 16:39
  • Please share console.log(response) result. Oct 25, 2020 at 16:42
  • sorry there was error in my code on set state after async was called it was response.object but after i removed it gives me the list
    – Sam
    Oct 25, 2020 at 16:44
  • 1
    Why not? Yes, You can. Oct 25, 2020 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.