How to display Cloud Function result in React component

Technical Issue Reporting
#21 
class Navy extends Component  {
    constructor(props) {
      super(props);
      this.state = {
          showsearch: false,
          searchcontent: null
      }
      this.openSearch = this.openSearch.bind(this);
      this.closeSearch = this.closeSearch.bind(this);
      this.handleChange = this.handleChange.bind(this)
    }
    openSearch() {
      this.setState({ showsearch: true });
    }

    closeSearch() {
      let vm = this;
      setTimeout(() => {
        vm.setState({ showsearch: false });
      }, 100);
    }

    handleChange(e) {
      var value = e.target.value;
      this.setState({searchcontent: value});
  }

                 render() {

      const Moralis = require('moralis')
      const params =  { value: this.state.searchcontent};

      const results = async () => {
        try {
          const x3 = await Moralis.Cloud.run("searchResults", params);
          return("x3", x3);
        } catch (e) {
          return(e);
        }
      };

                 return(
                   <Modal show={this.state.showsearch} onHide={this.closeSearch} size='lg' centered >
                        <Modal.Header >
                          <Modal.Title>Search</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                          Search Results #: {results.length} <br/>
                          Result (JSON): {JSON.stringify(results)} <br/>
                          Result: {results}
                        </Modal.Body>
                        <Modal.Footer>
                          <Button variant="secondary" onClick={this.closeSearch}>
                            Close
                          </Button>
                        </Modal.Footer>
                    </Modal>
)}}

literally nothing is returningā€¦ no error, not even the ā€œx3ā€ string

#22

Hi @wesleyt95
Share your server subdomain :man_factory_worker:

#23

I switched my button to onClick={x} and it did console.log the arrayā€¦ do you think thereā€™s a reason it wonā€™t return on the modal? not even results.length

#24

@cryptokid noticed the right thing:

That is probably because you defined result as a function

you could return something in that function maybe

#25

Where is that? is that app id or server url?

#26

You have inserted a function to render, not its result

#27

this is my current code though:

      const Moralis = require('moralis')
      const params =  { value: this.state.searchcontent};

      const results = async () => {
        try {
          const x3 = await Moralis.Cloud.run("searchResults", params);
          return(x3);
        } catch (e) {
          return(e);
        }
      };
#28

I made it a function because so far Iā€™ve had no other option when using await, Iā€™d get errors

#29

Share your server url

#30

Try this:

import React, { useState } from "react";
const Moralis = require("moralis");

function App2() {
  const [results, setResults] = useState("");
  Moralis.start({
    appId: "APP_ID",
    serverUrl: "SERVER_URL"
  });

  React.useEffect(() => {
    const asyncFunc = async () => {
      const x3 = await Moralis.Cloud.run("test_result");
      setResults(JSON.stringify(x3));
    };
    asyncFunc();
  }, []);

  return (
    <div>
      <p>test {results}</p>
    </div>
  );
}

export default App2;
#31

https://oorfqpisq8bs.grandmoralis.com:2053/server

#32

Try this:

const Moralis = require("moralis");
class Navy extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showsearch: false,
      searchcontent: null,
      searchResults: "",
    };
    this.openSearch = this.openSearch.bind(this);
    this.closeSearch = this.closeSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  openSearch() {
    this.setState({ showsearch: true });
  }

  closeSearch() {
    let vm = this;
    setTimeout(() => {
      vm.setState({ showsearch: false });
    }, 100);
  }

  handleChange(e) {
    var value = e.target.value;
    this.setState({ searchcontent: value });
  }

  componentDidMount() {
    const params = { search: this.state.searchcontent };
    Moralis.Cloud.run("userSearch", params).then((result) =>
      this.setState({ searchResults: result })
    );
  }

  render() {
    return (
      <Modal show={this.state.showsearch} onHide={this.closeSearch} size="lg" centered>
        <Modal.Header>
          <Modal.Title>Search</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Search Results #: {this.state.searchResults.length} <br />
          Result (JSON): {JSON.stringify(this.state.searchResults)} <br />
          Result: {this.state.searchResults}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={this.closeSearch}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}
#33

Unfortunately didnt work

#34

It didnā€™t work because of a misspellingā€¦ the query still didnt return much thoughā€¦

image
image1204Ɨ554 33.8 KB

#35

image

ethershare should be returning 1 object though

#36

in the dashboard logs it returned 1 object result?

#37

Okay I had change the componentDidMount params from search to valueā€¦ now itā€™s showing up in the logs! Front-end is still stubborn

#38

Itā€™s 6am so I need to go to sleep, itll come in the morning,ā€¦

for some reason it seems like this isnā€™t changing the initial state:

   async componentDidMount() {
      const Moralis = require('moralis')
      const params = { value: this.state.searchcontent };
       await  Moralis.Cloud.run("searchResults", params).then((result) =>
        this.setState([{searchResults: result }])
      );
    }