Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Object is possibly undefined when using React.createElement

This is my Ball:

import CSS from "csstype";

const circleAroundNumber: CSS.Properties = {
  borderRadius: "50%",
  width: "70px",
  height: "70px",
  padding: "8px",
  position: "absolute",

  borderBlockWidth: "2px",
  borderBlockColor: "black",
  textAlign: "center",

  fontSize: "32px",
  fontFamily: "Arial, sans-serif",
};

interface Props {
  children: string;
  positionx: string;
  positiony: string;
  ballColor: string;
}

function Ball({ children, positionx, positiony, ballColor }: Props) {
  const combinedStyles: CSS.Properties = {
    ...circleAroundNumber,
    background: ballColor,
    left: positionx,
    top: positiony,
  };
  return <div style={combinedStyles}>{children}</div>;
}

export default Ball;

This is my InsertionSortView:

import React from "react";
import ReactDOM from "react-dom";

import Ball from "../components/Ball";

interface viewProps {
  balls: (typeof Ball)[];
}

interface swapProps {
  ball1: typeof Ball;
  ball2: typeof Ball;
}

const swap = ({ ball1, ball2 }: swapProps): [typeof Ball, typeof Ball] => {
  //want to get position of ball1 and ball2
  let ball1positionx: number = 30;
  let ball1positiony: number = 100;
  let ball2positionx: number = 90;
  let ball2positiony: number = 100;
  let middle: number = (ball1positionx + ball2positionx) / 2;
  const maxHeight: number = 20;
  while (ball1positionx === 90 && ball1positiony === 100) {
    if (ball1positionx < middle) {
      ball1positionx += 3;
      ball1positiony -= 8;
      ball2positionx -= 3;
      ball1positiony -= 8;
    } else if (ball1positionx >= middle) {
      ball1positionx += 3;
      ball1positiony += 8;
      ball2positionx -= 3;
      ball1positiony += 8;
    }
    //render new balls
    React.createElement(Ball, 
      this.props.positionx: ball1positionx.toString(), 
      this.props.positiony: ball1positiony.toString(), 
      this.props.ballColor: "red",
      "7");
  }
  return [ball1, ball2];
};

function InsertionSortView({ balls }: viewProps) {}

export default InsertionSortView;

For some reason, in the swap function in InsertionSortView, when I try to call React.newElement for Ball and I try to pass in Ball’s props (for example, this.props.positionx: ball1positionx.toString(),), it’s throwing two errors: the first one is for this and it says Object is possible undefined; the second error it throws is that it expects the colon to be changed to a comma. Anyone know why?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, thanks to your help. We needed to pass children: "7" in as a parameter in Props. So the new code looks like this: React.createElement(Ball, { // props object positionx: ball1positionx.toString(), positiony: ball1positiony.toString(), ballColor: "red", children: "7" });


  2. 0

    it expects the colon to be changed to a comma

    You mix object syntax and positional arguments. React.createElement takes the Element props as its 2nd argument in the form of an object:

    React.createElement(Ball, { // props object
  positionx: ball1positionx.toString(), 
  positiony: ball1positiony.toString(), 
  ballColor: "red",
},
// children
"7");

    for this and it says Object is possible undefined

    Because you use this in an arrow function, its value is determined where you define that arrow function, i.e. in your InsertionSortView file, where this is probably the window object. Hence TypeScript has no clue whether this.props is properly defined or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search