Develop Reference

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

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.

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;

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

Search Filter in React/JS

I'm using React to map through a series of data to be displayed in cards on a page. What I'm trying to do is implement search/filter functionality so that when the user types in "bicep", they only see the cards that contain the word "bicep". Ideally I would like to search the entire card, including the description. No matter what I try, I can't get the search bar to have any effect on the cards. I don't get any error messages, but when I search for anything, none of the cards are filtered out, even if they don't contain the search term.
Here is the CodeSandbox link. The search function I'm attempting to use is below:
function mySearchFunction() {
var input, filter, div, dl, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDiv");
dl = div.getElementsByTagName("dl");
for (i = 0; i < dl.length; i++) {
a = dl[i].getElementsByTagName("span")[1];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
dl[i].style.display = "";
} else {
dl[i].style.display = "none";
}
}
}
I'm fairly new to Javascript so if there is another function/feature that you would recommend, I'm probably just not aware of it yet, and I'm open to anything, as long as it uses hooks instead of classes, and keep in mind I'm still learning this so I'm trying to take things one step at a time (i.e. I don't know anything about Angular or Vue or other non-React front-end frameworks).

You can achive that this way for example:
Attach onChange handler on input which set stateHook filter, after every change of state render method is called.
Emojies are rendered with filter(u must handle Case Insensitive Search here etc..) and they are mapped to ur object.
Here is code on CodeSandbox
function App() {
const [filter, setFilter] = useState("");
return (
<div>
<h1>
<span>emojipedia</span>
</h1>
<input
type="text"
id="myInput"
onChange={e => setFilter(e.target.value)}
placeholder="Search for names.."
/>
<div id="myDiv">
<dl className="dictionary">
{emojipedia
.filter(emoji => {
return (
emoji.name.includes(filter) || emoji.meaning.includes(filter)
);
})
.map(createEntry)}
</dl>
</div>
</div>
);
}

You need to make the following changes in the code to work .
You need to add the state in the component and make use of useState .
I added the onChange eventHandler to handle the input change.
Rewritten the filter method to filter the data based on the name property. You can make it generic by passing the property on what you want to filter the data.
Binded the state variable emojis , in the JSX , so that it re-renders the component when you change the state.
Here is the working solution: https://codesandbox.io/s/emoji-site-nc81j?file=/src/components/App.jsx
See the code below
function App() {
const [emojis, setEmojis] = useState(emojipedia);
function mySearchFunction(event) {
var tempData = emojipedia.slice();
tempData = tempData.filter(
data => data.name.indexOf(event.target.value) > -1
);
setEmojis(tempData);
}
function createEntry(emojiTerm) {
return (
<Entry
key={emojiTerm.id}
emoji={emojiTerm.emoji}
name={emojiTerm.name}
description={emojiTerm.meaning}
/>
);
}
return (
<div>
<h1>
<span>emojipedia</span>
</h1>
<input
type="text"
id="myInput"
onChange={mySearchFunction}
placeholder="Search for names.."
/>
<div id="myDiv">
<dl className="dictionary">{emojis.map(createEntry)}</dl>
</div>
</div>
);
}
export default App;

import React, {useState} from "react";
import Entry from "./Entry";
import emojipedia from "../emojipedia";
function App() {
const [results, setResults] = useState([])
function mySearchFunction(value) {
const results = emojipedia.filter(emoji => emoji.name.replace(/ /g,'').toLowerCase().includes(value.toLowerCase()))
setResults(results)
}
return (
<div>
<h1>
<span>emojipedia</span>
</h1>
<input
type="text"
id="myInput"
onChange={e => mySearchFunction(e.target.value)}
placeholder="Search for names.."
/>
<div id="myDiv">
<dl className="dictionary">
{
results.length === 0 ? 'no results' : results.map(result => {
return <Entry key={result.id}
emoji={result.emoji}
name={result.name}
description={result.meaning} />
})
}
</dl>
</div>
</div>
);
}
export default App;

How to implement an array increment function within JSX code using React.js JavaScript

I'm trying to develop a React program that changes information in a component each time the button "rectForward" or "rectBackward" is pressed. I'm passing the information in the form of an array of objects into my Body component from "importData" as seen below. That data is then converted into each object's indvidual data pieces through the map functions listed directly after render() is called. What I want to happen when the rectForward button is pressed is for the "text1" array value in Column1 to incrament by 1. The same happens when rectBackward is pressed, but I want the value to decrement. My primary difficulty is the syntax. As you can see in the statement onClick={Column1.text1=text1val[++], this was my first attempt at implementing this functionality, but the syntax is definitely incorrect. I was wondering if I could get some help formatting this
import React from "react";
import "./Body.css";
import Column1 from "./Body/Column1/Column1";
import "./Buttons.css";
import Column2 from "./Body/Column2/Column2";
import myData from "./myData";
class Body extends React.Component {
constructor() {
super()
this.state = {
importData: myData
}
}
render() {
var ID = this.state.importData.map(item => item.id)
var text1val = this.state.importData.map(item => item.text1)
var text2val = this.state.importData.map(item => item.text2)
var text3val = this.state.importData.map(item => item.text3)
return(
<div className="mainBody">
<div className="backPain">
<div className="holder">
<Column1 key={ID[0]} text1={text1val[0]}>
</Column1>
<div className="rectHolder">
<div className="rectForward" onClick={Column1.text1=text1val[++]}
<h2>Next</h2>
</div>
<div className="rectBackward">
<h2>Prev</h2>
</div>
</div>
<Column2 key={ID[0]} text2={text2val[0]} text3={text3val[0]}>
</Column2>
</div>
</div>
</div>
)
}
}
export default Body;
Thanks so much!

Simple thing i will do is keep an index in state. Than pass a function to next and prev which takes care of changing this index. and will show the values based on current state.
this.state = {
currentIndex : 0
}
HandleCurrentIndex(type){
if(type === 'inc'){
this.setState({currentIndex: this.state.currentIndex++})
} else {
this.setState({currentIndex: this.state.currnIndex-1 })
}
}
<div className="rectForward" onClick={()=>this.HandleCurrentIndex("inc")}>
<h2>Next</h2>
</div>
<div className="rectBackward" onClick={()=>this.HandleCurrentIndex('dec')}>
<h2>Prev</h2>
</div>
On side note:- This is just and example in product you should take care of index going below zero as well index exceeding limits of your data. which in turn will show undefined values. simple thing you should do is whenever it goes out of limit just reset it to default value ( 0 )

creating elements in React

I don't understand how elements are created in React.
I have some code below where the goal is to create elements on a form submit using a value from a refs - so for every submit in a form, it creates a new <h1> tag with the content of the textbox inside of it. A sample of what I'm trying to do looks like:
...
addHeader(e) {
e.preventDefault();
const newHeader = this.refs.post.value;
var newpost = React.createElement("h1", {
type: "text",
value: newHeader
});
}
...
render() {
return (
<div className="form-section">
{ newPost }
<form onSubmit={this.addHeader.bind(this)}>
<input id="input-post" type="text" placeholder="Post Here" ref="post" />
<input type="submit" value="Submit" />
</form>
<button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>
</div>
);
}
Basically my thinking is in my addHeader() function I'm assigning a variable of newPost to the method and calling it within my component. This code is causing 2 errors:
33:9 warning 'newpost' is assigned a value but never used no-unused-vars
49:13 error 'newPost' is not defined no-undef
What I don't understand, is (from what I can see) I am assigning a value to that variable and also using it in the component that I am rendering... along with that, I don't understand this error message. How can something be assigned a value but be undefined at the same time...? Is it because it's in the wrong scope? How do I declare where the new element is rendered specifically in the component?
I read the documentation but it doesn't give a clear answer as to how to control where in the component the new element is rendered.

Made some changes to your code. You're going to want to initialize component state in your constructor. In your addHeader method you will use this.setState to update the state of the component with a new posts value including the value of this.input. I changed your ref on the input an actual ref. You take the element and store on this. Every time you add a new post you will get a new <h1> with the value of the textarea.
...
addHeader(e) {
e.preventDefault();
this.setState((prevState, props) => {
return { posts: [ ...prevState.posts, this.input.value ] };
});
}
...
render() {
const { posts } = this.state;
return (
<div className="form-section">
{ posts.map( text => <h1>{ text }</h1> ) }
<form onSubmit={this.addHeader.bind(this)}>
<input id="input-post" type="text" placeholder="Post Here" ref={ el => this.input = ref } />
<input type="submit" value="Submit" />
</form>
<button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>
</div>
);
}
As an aside: Binding functions in the render method of react components will cause a performance hit. There is no need to re-bind the this context of the function on every render. this.clearFields.bind(this) should become this.clearFields and you will need to add this.clearFields = this.clearFields.bind(this) to your constructor. You do not need to bind functions that are not used as callbacks.
You're going to want to do the same thing for this.addHeader.bind(this).

What is workflow of the React

The code below is from React, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.renderComponent(<TodoApp />, mountNode);
The above code is used to dynamically update the DOM structure. This code is referred from http://facebook.github.io/react/ so please help in knowing the work process of the code.

Thanks, that's a very good question. Here's a rough overview of what is happening behind the scenes:
Initialization
It all starts with this line:
React.renderComponent(<TodoApp />, mountNode);
This instantiate the TodoApp component which calls:
TodoApp::getInitialState()
then, it renders the TodoApp component
TodoApp::render()
which in turns instantiate a TodoList
TodoList::render()
At this point, we have everything we need in order to render the initial markup
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="" />
<button>Add #1</button>
</form>
</div>
It is stringified and added inside of mountNode via innerHTML
OnChange
Then let's say you're going to enter some text in the input, then
TodoApp::onChange
is going to be called, which is going to call
TodoApp::setState
and in turn will call
TodoApp::render
again and generate the updated DOM
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="sometext" />
<button>Add #1</button>
</form>
</div>
What's happening at this point is that React is going to do a diff between the previous DOM and the current one.
<div>
<input
- value=""
+ value="sometext"
Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.

You can find more general explanation on React official page.
Generally the react lifecycle can be described by the following stages (which can repeat multiple times once the components is created):
Initializing values (only once):
constructor(){ ... }
Mounting, if you need to add something after initial rendering (only once):
componentDidMount(){...}
Re-rendering functions, variables and components
myArrowFunction = () => {
...
this.setState({...})
...
}
Updating:
componentDidUpdate()}{...}
shouldComponentUpdate(){...}
Unmounting:
componentWillUnmount(){...}
Rendering happens here
render(){...}