can't append h1 element to parent div in React?

Question

i'm creating a simple react website that's supposed to do some calculations and find out Joules of my input values after the calculations...right now the input values are already preset but i will remove the value="" from my <input> later.

here is the.JSX component file that's the issue...one of the components.

import React, { Component } from 'react';
import Atom_icon from './cartridges.png';

class Joule_calc extends Component {


    

    render(){

        return (
            <div className='Joule_div'>
                <h3 style={{color:"white", textAlign:"center"}}>JOULE CALCULATOR</h3>
                <label className='lab1'>WEIGHT=/GRAMS</label><br></br>
                <input className='weight_inp' type='text' value="2" />
                <label className='lab2'>SPEED=M/S</label><br></br>
                <input className='speed_inp' type='text' value="5" />
                <button className='count_button' onClick={this.Create_response}>CALCULATE</button>
                <h1 className='Result_joule'></h1>
            </div>
        )
    }

    Create_response(){
        console.log("creating response...")
        let sum = document.createElement("h1")
        sum.className = 'Result_joule'
        sum.textContent = "678"

        let div_panel = document.getElementsByClassName("Joule_div")
        div_panel.append('Result_joule')
    }


    Returned_values(){
        let weight_val = document.getElementsByClassName("weight_inp")[0].value;
        let speed_val = document.getElementsByClassName("speed_inp")[0].value;
        
        let final_calculation = weight_val * speed_val
        return final_calculation
        
    }

} 


export default Joule_calc 

so when i run my code i get

Uncaught TypeError: div_panel.append is not a function
at Create_response (Joule_calc_window.jsx:31:1)

i don't get why i can't append my new element to the div. it says it's not a function so what's the solution then? i'm new to React and web so probably it's just a noobie thing. also i tried directly creating a h1 inside the 'Joule_div' like this.

<h1 className='Result_joule'>{"((try returning here from one of these methods))"}</h1>

but that of course failed as well. So would appreciate some help to get what's going on. i'm trying to add a number after the button click that's in h1 and in future going to be a returned number after calculating together the input values in a method.i imagine that something like

MyMethod(){
 value = values calculated
 return value
}

and later grab it with this.MyMethod example

 <h1>{this.MyMethod}</h1>

this is a example that of course didn't work otherwise i wouldn't be here but at least gives you a clue on what i'm trying to do. Thank you.

Answer 1

You don't leverage the full power of react. You can write UI with only js world thanks to JSX. State changes triggering UI update.

I may miss some specificaiton, but fundamental code goes like the below. You should start with function component.

// Function component
const Joule_calc = () =>{

  // React hooks, useState
  const [weight, setWeight] = useState(0)
  const [speed, setSpeed] = useState(0)
  const [result,setResult] = useState(0)

  const handleCalculate = () =>{
    setResult(weight*speed)
  }

  return (
    <div className="Joule_div">
    <h3 style={{ color: 'white', textAlign: 'center' }}>JOULE CALCULATOR</h3>
    <label className="lab1">WEIGHT=/GRAMS</label>
    <br></br>
    <input className="weight_inp" type="text" value={weight} onChange={(e)=>setWeight(parseFloat(e.target.value))} />
    <label className="lab2">SPEED=M/S</label>
    <br></br>
    <input className="speed_inp" type="text" value={speed} onChange={(e)=>setSpeed(parseFloat(e.target.value))} />
    <button className="count_button" onClick={handleCalculate}>
      CALCULATE
    </button>
     <h1 className='Result_joule'>{result}</h1>
  </div>
  )
}

export default Joule_calc;

Answer 2

div_panel is an collection of array which contains the classname ["Joule_div"]. so first access that value by using indexing. and you should append a node only and your node is "sum" not 'Result_joule' and you should not use textcontent attribute because you will be gonna definitely change the value of your result as user's input value

Create_response(){
        console.log("creating response...")
        let sum = document.createElement("h1")
        sum.className = 'Result_joule'
        //sum.textContent = "678"

        let div_panel = document.getElementsByClassName("Joule_div")
        div_panel[0].append('sum')
    }

if any problem persists, comment below