CODEWITHSUNDEEP
javascriptreactjs
Winsome
Winsome

Reputation: 89

Is it possible to write an if statement within the return of a functional component? ReactJS

I want to toggle a few lines of code when a popup is open. I've setup the constant and button onClick, but I'm not sure if it's possible to write something like an if statement to do such a thing.

I have tried to encapsulate the code in a single line if statement, but it clashes with the other inline code (the lastDroppedItem() section).

Reason I want to toggle it is because the code below overlaps on the popup modal that's invoked within the code in Button.jsx that sits above it in the return statement.

const Frame = ({ accept, lastDroppedItem, onDrop }) =>  {
  const [frame] = useState(pictureFrame);
  const [{ isOver, canDrop }, drop] = useDrop({
      accept,
      drop: onDrop,
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      })
  })
  const [popup, setPopup] = useState(false);

   const isActive = isOver && canDrop

   return(
        <div className="content"  ref={drop} >
          {lastDroppedItem && ( <div className="animatedBox"><Button onClick={ () => setPopup(true) } selectedIcon={lastDroppedItem.type}/></div> )}
          <img className="frame" alt="main frame" src={frame} />

           //starting here I want to toggle the below
          {lastDroppedItem && (
            <img className="selectedIcon content" alt={ lastDroppedItem.type + " icon"} src={setIcon(lastDroppedItem.type)} />
          )}
          <div className="animatedBox">{isActive ? <Pill text={"Drop icon into picture frame!"}/>:
            <Pill text={"Drag icons on the left into picture frame!"}/> }</div>
        </div>
    );

}

export default Frame;

repo: https://github.com/WinsomeYuen/Artescence

Upvotes: 0

Views: 67

Answers (2)

Eugene Mankovski
Eugene Mankovski

Reputation: 1180

You need to use ternary operator together with helper function returning your pills. It is a bit more readable:

import React, {useState} from 'react';
import {useDrop} from 'react-dnd';
import setIcon from '../Option/setIcon.jsx';
import Pill from '../Pill/Pill.jsx';
import Button from '../Button/Button.jsx';
import './Frame.css';
import pictureFrame from '../assets/picture-frame.png';

const Frame = ({accept, lastDroppedItem, onDrop}) => {
    const [frame] = useState(pictureFrame);
    const [
        {
            isOver,
            canDrop
        },
        drop] = useDrop({
        accept,
        drop: onDrop,
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop()
        })
    })
    const [popup,
        setPopup] = useState(false);

    const isActive = isOver && canDrop
    const renderPillTags = (isActive) => {
        return <div className="animatedBox">{isActive
                ? <Pill text="Drop icon into picture frame!"/>
                : <Pill text="Drag icons on the left into picture frame!"/>}
        </div>
    }
    return (

        <div className="content" ref={drop}>
            {lastDroppedItem
                ? <div className="animatedBox"><Button onClick={() => setPopup(true)} selectedIcon={lastDroppedItem.type}/></div>
                : null}

            <img className="frame" alt="main frame" src={frame}/>
            {lastDroppedItem
                ? <img
                        className="selectedIcon content"
                        alt={lastDroppedItem.type + " icon"}
                        src={setIcon(lastDroppedItem.type)}/>
                : renderPillTags(isActive)}
        </div>
    );

}

export default Frame;

Upvotes: 1

tcf01
tcf01

Reputation: 1789

As suggested by @Josh Hunt, ternary operator may do what you want. Based on the condition, you can choose to render different block code. 

return(
    // ...

    //starting here I want to toggle the below
    {lastDroppedItem /*or other condition*/ ? 
              (
                <img className="selectedIcon content" alt={ lastDroppedItem.type + " icon"} src={setIcon(lastDroppedItem.type)} />
              )
    :
              (
                <div className="animatedBox">{isActive ? <Pill text={"Drop icon into picture frame!"}/>:
                     <Pill text={"Drag icons on the left into picture frame!"}/> }</div>
                </div>
             )

)

Upvotes: 1

Related Questions