We Keep Coding

setState() Syntax seems wrong

Why does it work when I do "state:" and not "tasks:" in the addItem() function. I thought that the syntax is that you put the state that you want to change, which in this will be tasks:
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(){
super();
this.state = {
value: '',
tasks: []
};
this.handleChange = this.handleChange.bind(this)
this.addItem = this.addItem.bind(this)
}
handleChange(event) {
this.setState({
value: event.target.value
})
}
addItem(){
this.setState({
state: this.state.tasks.push(this.state.value),
value: ''
})
}
render(){
const itemList = this.state.tasks.map((num,index) => <li key={index}>{num}</li>)
return(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}></input>
<button onClick={this.addItem}>+</button>
<button>-</button>
<ul>{itemList}</ul>
</div>
)
}
}
export default App;

First of all you are mutating your state, this is the first rule when dealing with react state management. Never Mutate state. and you need to wrapper your event handlers in an anonymous function so you can pass you event object.
This is your code fixed below---
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value: '',
tasks: []
};
this.handleChange = this.handleChange.bind(this)
this.addItem = this.addItem.bind(this)
}
handleChange(event) {
this.setState({
value: event.target.value
})
}
addItem(){
const tempTasksArray = this.state.tasks.concat(this.state.value)
this.setState({
tasks: tempTasksArray,
})
}
render(){
const itemList = this.state.tasks.map((num,index) => <li key={index}>{num}</li>)
return(
<div>
<input
type="text"
value={ this.state.value }
onChange={(event) => this.handleChange(event) } />
<button onClick={() => this.addItem }>
+
</button>
<button>
-
</button>
<ul>{ itemList }</ul>
</div>
)}
}
export default App;

ReactJS how to access content output from a component?

I'm currently working on a project that uses QuillJS for a rich text editor. I need to post the rich text content to my backend but I'm not sure how to access the QuillJS output.
In RichTextEditor.js
import React, { Component } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
class RichTextEditor extends Component {
constructor(props) {
super(props);
// this.formats = formats;
this.state = { text: "" }; // You can also pass a Quill Delta here
this.handleChange = this.handleChange.bind(this);
}
handleChange(value) {
this.setState({ text: value });
const text = this.state;
console.log(text);
}
render() {
return (
<ReactQuill
value={this.state.text}
onChange={this.handleChange}
formats={this.formats}
modules={this.modules}
/>
);
}
}
export default RichTextEditor;
The console.log(text) basically just outputs the content of the rich text editor. Something like this "<p><em>aasdasdasd</em><strong><em>asdasdasdasd</em></strong></p>"
In Post.js
import React, { Component } from "react";
import RichTextEditor from "./RichTextEditor.js";
import "../../css/Post.css";
class Post extends Component {
constructor(props) {
super(props);
this.state = {
question: "",
};
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
console.log(this.state);
};
handleSubmit = (e) => {
e.preventDefault();
const { question } = this.state;
console.log("Question");
console.log(question);
render() {
const { question } = this.state;
return (
<div className="post">
<div className="post__container">
<form onSubmit={this.handleSubmit}>
<div className="post__richTextEditor">
<RichTextEditor value={question} onChange={this.onChange} name="question" />
</div>
</form>
</div>
</div>
);
}
}
export default Post;
I'm trying to update the state of the question but it doesn't seem to be updating. console.log(question) only outputs a single string.
How can I access the same string output from RichTextEditor.js?

Your RichTextEditor component should not handle change, it should only receive props from higher component:
class RichTextEditor extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ReactQuill
value={this.props.value}
onChange={this.props.onChange}
formats={this.formats}
modules={this.modules}
/>
);
}
}
export default RichTextEditor;
Then your Post component pass value and onChange props to RichTextEditor:
class Post extends Component {
constructor(props) {
super(props);
this.state = {
question: "",
};
this.onChange = this.onChange.bind(this);
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
console.log(this.state);
};
handleSubmit = (e) => {
e.preventDefault();
const { question } = this.state;
console.log("Question");
console.log(question);
render() {
const { question } = this.state;
return (
<div className="post">
<div className="post__container">
<form onSubmit={this.handleSubmit}>
<div className="post__richTextEditor">
<RichTextEditor value={question} onChange={this.onChange} name="question" />
</div>
</form>
</div>
</div>
);
}
}

in RichTextEditor.js
handleChange(value) {
this.setState({ text: value });
const text = this.state;
console.log(text);
props.onChange(text); // passing the inner State to parent as argument to onChange handler
}
Now in Post.js
onChange = (newStateString) => {
//this.setState({ [e.target.name]: e.target.value });
console.log(newStateString); // you should get the string here
};

Pass data from input field

I want to take data from an input field and pass it into a to Generate QR code. When I pass the value as a text its work. But can’t pass the input value. Does anyone have a simple example of this working?
import React, {Component} from 'react'
import QrCode from 'react.qrcode.generator'
class DemoEdit extends Component {
constructor() {
super();
this.state = {
topicIn: "",
topicOut:""
};
this.handleChange=this.handleChange.bind(this);
this.generate=this.generate.bind(this);
}
handleChange ({ target}){
this.setState({
[target.name] : target.value
})
}
generate(){
this.setState({
topicOut:this.state.topicIn
})
}
render() {
return <div>
<input
type="text"
name="topicIn"
placeholder="Enter Text Here..."
value={this.state.topicIn}
onChange={this.handleChange}
/>
<button value="Send" onClick={this.generate}>Generate</button>
<p>{this.state.topicOut}</p>
<QrCode value={this.state.topicOut}/>
</div>
}
}
export default DemoEdit;

Use a different package. I just tried qrcode.react
import React, { Component } from "react";
import QrCode from "qrcode.react";
class DemoEdit extends Component {
constructor() {
super();
this.state = {
topicIn: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange({ target }) {
console.log("value", target.value);
this.setState({
topicIn: `${target.value}`
});
}
render() {
return (
<div>
<input
type="text"
name="topicIn"
placeholder="Enter Text Here..."
value={this.state.topicIn}
onChange={this.handleChange}
/>
<QrCode value={this.state.topicIn} />
</div>
);
}
}
export default DemoEdit;
or as a more fancy functional component with hooks, which I totally recommend to use
import React, { useState } from "react";
import QrCode from "qrcode.react";
const DemoEdit = () => {
const [topicIn, setTopicIn] = useState("");
const onChange = (event) => setTopicIn(event.target.value);
return (
<div>
<input
type="text"
name="topicIn"
placeholder="Enter Text Here..."
value={topicIn}
onChange={onChange}
/>
<QrCode value={topicIn} />
</div>
);
};
export default DemoEdit;

how to display the result in paragraph with react js

How can I display the result, now in the code below I only export it to the console but I want it in the browser in a paragraph or other tag. I know this is a stupid question (maybe) but I'm new to React.
import React, { Component, useState, useEffect } from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
input: 0
}
}
handleChange(e){
this.setState({input: e.target.value})
}
handleSubmit(e){
e.preventDefault()
let value = eval(this.state.input)
console.log(value)
}
render(){
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
</div>
)
}
}
export default App;

Set value as a state. Then access it using this.state.value
import React, { Component, useState, useEffect } from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
input: 0,
value: "",
}
}
handleChange(e){
this.setState({input: e.target.value})
}
handleSubmit(e){
e.preventDefault()
let value = eval(this.state.input)
this.setState({value});
}
render(){
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
<p>{this.state.value}</p>
</div>
)
}
}
export default App;

I can see you are using the useState hook. how about you set a state which will be updated when you submit your form?
like const [value, setValue] = useState() in your function, and then in your submit function call the setValue(value)
from there you can access the value state and render it anywhere in your component. Kindly note that you should only use hooks inside a functional component.

Hi here is a working Demo on how you can do what you have in mind:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
input: 0
}
}
handleChange(e) {
this.setState({
input: e.target.value
})
}
handleSubmit(e) {
e.preventDefault()
let value = eval(this.state.input)
console.log(value)
}
render() {
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
<p>
{this.state.input}
</p>
</div>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode >
<App / >
</React.StrictMode>,
rootElement
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

Check you can achieve this with some changes.
import React, { Component, useState, useEffect } from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
input: 0,
value: '', //<-- Added
}
}
handleChange(e){
this.setState({input: e.target.value})
}
handleSubmit(e){
e.preventDefault()
let value = eval(this.state.input)
console.log(value)
this.setState({value}); //<--Added
}
render(){
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
<p>{this.state.value}</p> <!-- Added -->
</div>
)
}
}

Why the state is not updating in App.js after setting up this.setState?

Here is my simple to-do app program where I have made only one component which takes in the input form user and passes that input value to App.js to update items in App.js state.
todo-form.component.js
import React from 'react';
class SignInForm extends React.Component {
constructor(){
super();
this.state ={
temp: null
};
}
handleChange = (e) => {
e.preventDefault();
this.setState({
temp: e.target.value
},
console.log(this.state)
);
// this.props.addInput(e.target.value);
}
handleSubmit= (e) => {
e.preventDefault();
console.log(this.state.temp);
this.props.addInput(this.state.temp);
}
render(){
return(
<div className="container-form">
<form onSubmit={this.handleSubmit}>
<input
name="description"
type="text"
placeholder="add description"
onChange={this.handleChange}
value={this.state.input}
/>
<button type="submit">ADD</button>
</form>
</div>
);
}
}
export default SignInForm;
App.js
import React from 'react';
import './App.css';
import SignInForm from './components/todo-form/todo-form.component'
import ItemList from './components/todo-list/todo-list.component';
class App extends React.Component {
constructor(){
super();
this.state = {
input: []
};
}
addInput = (item) => {
let newInput=[...this.state.input,item];
console.log(newInput);
this.setState = ({
input: newInput
},
console.log(this.state)
);
}
render(){
return (
<div className="App">
<h1>TO-DO LIST</h1>
<SignInForm addInput={this.addInput} />
</div>
);
}
}
export default App;
On taking input the state inside todo-form.component.js is getting updated with the typed input value but on passing state.temp in handleChange function, the state inside App.js is not updating when addInput function is called.
Please help me on this issue and how my state is not getting updated in App.js??

Your setState is the problem. Have a look at my code.
App.js
class App extends React.Component {
state = {
input: [],
};
addInput = (item) => {
let newInput = [...this.state.input, item];
//setState should be this way
this.setState({
input: newInput,
});
};
render() {
return (
<div className="App">
<h1>TO-DO LIST</h1>
{this.state.input.map((el) => (
<li> {el}</li>
))}
<SignInForm addInput={this.addInput} />
</div>
);
}
}
export default App;
Login file.
class SignInForm extends React.Component {
// constructor(props) {
// super(props);
state = {
temp: null,
};
// }
handleChange = (e) => {
e.preventDefault();
this.setState({
temp: e.target.value,
});
// this.props.addInput(e.target.value);
};
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.temp);
this.props.addInput(this.state.temp);
};
render() {
return (
<div className="container-form">
<form onSubmit={this.handleSubmit}>
<input
name="description"
type="text"
placeholder="add description"
onChange={this.handleChange}
value={this.state.input}
/>
<button type="submit">ADD</button>
</form>
</div>
);
}
}
export default SignInForm;