How to display Cloud Function result in React component

is there a reason why my cloud function isn’t returning on my frontend? the server logs show the cloud function is working fine, I just can’t see it on the client

Here’s my cloud function:

Moralis.Cloud.define("userSearch", async (request) => {
  const query = new Moralis.Query("User");
  query.equalTo("username", request.params.search);
  const results = await query.find({useMasterKey:true});
  
  return  results;
});

Here’s the front end:

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 =  { search: this.state.searchcontent };
                     const results = async () => await Moralis.Cloud.run("userSearch", params);

                 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>
)}}

I just realized we aren’t supposed to call from USER database in front end so I made another object but it’s still not returning anything:

      const Moralis = require('moralis')
      const query = new Moralis.Query("UserList");
      query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find();

@cryptokid @Yomoo

here it looks like you define a function with the name results, this is what you want to do?

you can also look in your dashboard in logs to see it it returns the proper output when you call that userSearch cloud function

Looking at the server logs it was returning the proper output but I’m trying to return the info to frontend… I made another object too

in front end if you do something like

x = await Moralis.Cloud.run("userSearch", params);
console.log(JSON.stringify(x));

then you see the right value in your browser console?

undefined…

      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find()
      console.log(JSON.stringify(results))
      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find()
      console.log(JSON.stringify(results))

what if you change it to:

      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = await query.find()
      console.log("query find", JSON.stringify(results))

console log said “query find undefined”

You have no errors in your browser console?

Yea but I always have errors, idk if this has anything to do with it:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Also the server logs show it returned perfectly just now

My cloud logs only show when I call results(), if I dont add parentheses nothing happens… Either way undefined on front end and browser console

that is probably because you defined result as a function

you could return something in that function maybe

I cant even render the page anymore, computer is getting hot too

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

ok, probably it was not a good idea, it looks like you got an infinite loop now

 const results = async () => { return(await Moralis.Cloud.run("searchResults", params))}

Do you know why nothing is returning?

@cryptokid

It looks like this works fine for me in a react app:

import { useMoralis } from "react-moralis";

function App() {
  const {  Moralis } = useMoralis();

  const x = async () => {
    try {
      const x3 = await Moralis.Cloud.run("test_result");
      console.log("x3", x3);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={x}> test button</button>
      </p>
    </div>
  );
}

export default App;

I copy and pasted the exact thing but replaced console.log with return…didn’t get anything, not even an error was returned… Also as you see I’m in a class component so I can’t useMoralis()

This works too:

const Moralis = require("moralis");

function App2() {
  const x = async () => {
    try {
      const x3 = await Moralis.Cloud.run("test_result");
      console.log("x3", x3);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={x}> test button 2</button>
      </p>
    </div>
  );
}

export default App2;

If you let that console.log and look in the console you should see the output