score:-1

Render is that what exactly you want to trigger multiple times.

Return is that which u want to Display.

For example.

render(){

let cardDisplay=some random text which u want to trigger multiple times. (Example, Displaying the names of employees in a company)}

return

( {cardDisplay} )

Explanation: You want to Display the list of employees in a company.so return the variable which you want to trigger(repeat)multiple times. Inside Render write what your logic for what to repeat.

score:0

render() is like the warm-up and planning phrase before the ball game starts. Everyone knows what's gonna happen and then return is the player on the field that actually does what the render () says should happen.

score:1

Render is a method that tell react what to display.

Return is a method / give output of function

score:1

"The render method returns a description of what the DOM should look like, and then React efficiently updates the real DOM to match."

For the best example to know the difference, do check out this link: https://quickleft.com/blog/understanding-the-difference-between-react-elements-and-components/

score:2

In react, render is a method that tell react what to display. return in a method or function is the output of the method or function.

score:3

return and render are different. render is a method of react. return is just pure javascript for returning output. nothing complicated.

score:7

Render is what is actually being called in the component, return is what is "rendered". You can log, set variables, conditional rendering etc in the render, but return is what is actually output

render() {
console.log("Test")
const test = "test"
  return(
    <h1>Hi</h1>
  )
}

score:29

In React prior to the newest version (v16), most React Components were class based. In a class based component, you call the render() method and then return the required JSX (html like javascript mix). With the update of React 16+, there is an increased use of functional components which do not have a render() method, instead returning the JSX directly. For example the syntax of a functional component may be like this:

const NewComponent = (props) => {
   return (
           <div>
               <h1>Title</h1>
           </div>
    )
}

alternatively, you can implicitly return JSX in a functional component without the return statement like this:

const NewComponent = (props) => (
   <div>
       <h1>Title</h1>
   </div>
)

Both of these will show the same as a class based component like this:

class NewComponent extends React.Component {
    render() {
        return (
            <div>
               <h1>Title</h1>
            </div>
        )
    }
}

You can read more at https://reactjs.org/docs/components-and-props.html

score:43

render method is required when you are writing a React component using as a class method

According to the docs:

The render() method is required.

When called, it should examine this.props and this.state and return one of the following types:

React elements. Typically created via JSX. An element can either be a representation of a native DOM component (<div />), or a user-defined composite component (<MyComponent />).

String and numbers. These are rendered as text nodes in the DOM.

Portals. Created with ReactDOM.createPortal. null. Renders nothing.

Booleans. Render nothing. (Mostly exists to support return test && pattern, where test is boolean.)

Essentially render is kind of a lifecycle method which is invoked whenever the component needs to update.

As for the return statement, its used to return the data/response/JSX elements depending on where it is used. If used in render method you need to return one of the above specified types(React elements, Strings and numbers, Portals or Booleans).

return from other function can either return the value evaluated from the function or return the React elements to be rendered in the render method

Functional components don't define a render method, instead they return the React elements using an explicit return statement or an implicit return

Eg: explicit return

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

Eg: Implicit return

const Welcome = (props) => (
     <h1>Hello, {props.name}</h1>;
)

Related Query

More Query from same tag