Button does not work using function component in react

Question

I am new to React and I've been told its a better way to use function components than class components and I have come to an error where I am unable to show components that I included, I don't really understand what is wrong hence the explanation might be wrong.

Please see my sandbox link for errors

https://codesandbox.io/s/sweet-andras-y1g6o?file=/src/App.js

My code as below

import React from "react";
import { Button } from "antd";

const Order = () => {
  const showAction = () => {
    <Button type="primary" size="small">
      {" "}
      {"View"}
    </Button>;
    <h1>Here</h1>;
  };
  return (
    <div>
      <h1>Hello{showAction()} Button is here</h1>
    </div>
  );
};

export default Order;

I am expecting it to show Hello {Button} Here Button is here, but instead it shows

Hello Button is here

You could be missing return inside your showAction function — Kaung Khant Zaw
– Kaung Khant Zaw, Commented Jan 18, 2021 at 6:04

Jalaj · Accepted Answer · 2021-01-18 06:11:15Z

2

Here's the working code:

import React from "react";
import { Button } from "antd";

const Order = () => {
  const showAction = () => (
    <div>
      <Button type="primary" size="small">
        {" "}
        {"View"}
      </Button>
      <h1>Here</h1>
    </div>
  );
  return (
    <div>
      <h1>Hello{showAction()} Button is here</h1>
    </div>
  );
};

export default Order;

And here's what was wrong with your code:

showAction function wasn't returning anything (because you used braces instead of parentheses).
All jsx elements must have a single parent element. Notice that I have added a <div> that wraps the button and the heading component. You could have also used <span> or any other component/tag of your choice.

answered Jan 18, 2021 at 6:11

Jalaj

4635 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codemonkey · Accepted Answer · 2021-01-18 06:21:42Z

1

@Jalaj has already broken down the problem very nicely, so the only thing I would like to add is that in the case of your showAction element, you can skip adding parentheses or curly braces altogether. When doing so, JS assumes a return statement. This will work like a charm:

const showAction = () => 
    <Fragment>
      <Button type="primary" size="small">
        {" "}
        {"View"}
      </Button>
      <h1>Here</h1>
    </Fragment>

answered Jan 18, 2021 at 6:21

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Collectives™ on Stack Overflow

Button does not work using function component in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related