I'm attempting to convert some React JS code to Ko...

# react

[Mark Vogel]

I'm attempting to convert some React JS code to Kotlin/JS and, being inexperienced with React, I'm having issues figuring out how to do so.
Does anyone know how to convert this kind of div to Kotlin React? I can post the package.json dependencies if needed as well

return (
    <div
      style={
        isDraggedOver
          ? {
              border: "dashed 2px #abcdef",
              borderRadius: "5px",
              minHeight: "5rem",
              boxSizing: "border-box",
              gridColumn: `span ${size}`
            }
          : { gridColumn: `span ${size}` }
      }
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onDragOver={(e) => e.preventDefault()}
    >
      {!isDraggedOver && children}
    </div>
  );

[turansky]

Is it inside component body?

[turansky]

Simple div example

[Mark Vogel]

It is yes:

const ChartContainer = ({
  onDrop,
  children,
  onDragEnter,
  onDragLeave,
  isDraggedOver,
  size
}) => {
  return (
    <div
      style={
        isDraggedOver
          ? {
              border: "dashed 2px #abcdef",
              borderRadius: "5px",
              minHeight: "5rem",
              boxSizing: "border-box",
              gridColumn: `span ${size}`
            }
          : { gridColumn: `span ${size}` }
      }
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onDragOver={(e) => e.preventDefault()}
    >
      {!isDraggedOver && children}
    </div>
  );
};

I appreciate that example it's actually quite helpful. Am I correct in assuming that style { ... } can be replaced with emotion css { ... }?

[turansky]

No. Direct replacement - style
property

style = jso {
    ...
}

[turansky]

css also will work, if priority isn’t important

[Mark Vogel]

I see! Good to know. Is there a reference for that kind of thing that I can use?