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

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.

CodePudding user response：

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;

CodePudding user response：

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