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;
Related
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>
)
}
}
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;
I tried to autofill the input field values. So, I sent the id via params from the Cards component to the EditForm component, and in EditForm, in its componentDidMount(), I used that id and fetched the post by id from the database, got the post from the store, and pulled out title and description. So, I made my form prefilled with values that I received from the store. Now, I'm stuck here. How do I edit this form? With these values that I have set in the value property of an input field, obviously I am unable to type anything because I wanted to make it prefill. Now, I'm thinking my approach was wrong. Please help.
Cards
import React, { Component } from "react"
class Cards extends Component {
handleEdit = _id => {
this.props.history.push(`/post/edit/${_id}`)
}
render() {
const { _id, title, description } = this.props.post
return (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content" style={{ border: "1px grey" }}>
<p className="title is-5">{title}</p>
<p className="content">{description}</p>
<button onClick={() => {this.handleEdit(_id)}} className="button is-success">
Edit
</button>
</div>
</div>
</div>
</div>
)
}
}
export default Cards
EditForm
import React, { Component } from "react";
import { connect } from "react-redux";
import { getPost } from "../actions/userActions"
class EditForm extends Component {
componentDidMount() {
const id = this.props.match.params.id
this.props.dispatch(getPost(id))
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
[name]: value
})
};
render() {
return (
<div>
<input
onChange={this.handleChange}
name="title"
value={this.props.post.post.title}
className="input"
placeholder="Title"
/>
<textarea
onChange={this.handleChange}
name="desctiption"
value={this.props.post.post.description}
className="textarea"
></textarea>
<button>Submit</button>
</div>
);
}
}
const mapStateToProps = store => {
return store;
};
export default connect(mapStateToProps)(EditForm)
define 2 state title and description and set them after you pulled them. Then update the state via onchange function and pass the state as value to input and textarea
import React, { Component } from "react";
import { connect } from "react-redux";
import { getPost } from "../actions/userActions"
class EditForm extends Component {
constructor() {
super();
this.state = {
title: '',
description: ''
};
componentDidMount() {
const id = this.props.match.params.id
this.props.dispatch(getPost(id))
}
componentWillReceiveProps(nextProps) {
if (nextProps.post !== this.props.post) {
this.setState({
title: nextProps.post.post.title,
description: nextProps.post.post.description,
});
}
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
[name]: value
})
};
render() {
const { title, description } = this.state
return (
<div>
<input
onChange={this.handleChange}
name="title"
value={title}
className="input"
placeholder="Title"
/>
<textarea
onChange={this.handleChange}
name="description"
value={description}
className="textarea"
></textarea>
<button>Submit</button>
</div>
);
}
}
const mapStateToProps = store => {
return store;
};
export default connect(mapStateToProps)(EditForm)
I have a component UserInput and its used in App component(class based.) Now i am not able to render the onChange event in my html
import React from 'react';
const userInput =(props) =>{
return(
<input onChange={props.changed} />
);
};
export default userInput;
My app component looks like this.
import React, { Component } from 'react';
import './App.css';
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';
class App extends Component{
constructor(props) {
super(props);
this.state = { userName: "dssdf" };
this.handleChange = this.handleChange.bind(this);
}
const handleChange = (event) =>{
this.setState({
userName: event.target.value
})
}
render(){
return(
<div >
<UserInput changed={this.handleChange} />
<UserOutput userName={this.state.userName} />
</div>
)
}
}
export default App;
Any help is appriciated.
Thanks
pass the state as value to <input />
import React from 'react';
const userInput =(props) =>{
return(
<input value={props.value} onChange={props.changed} />
);
};
export default userInput;
class App extends Component{
constructor(props) {
super(props);
this.state = { userName: "dssdf" };
this.handleChange = this.handleChange.bind(this);
}
const handleChange = (event) =>{
this.setState({
userName: event.target.value
})
}
render(){
return(
<div >
<UserInput value={this.state.userName} changed={this.handleChange} />
<UserOutput userName={this.state.userName} />
</div>
)
}
}
I have a simple form on child component A. On submit I'm passing the data from the form to the parent component and storing the data in state.. I want to then move this data to a different child, child component B.(the sibling of A)
I'm having trouble getting the data to be rendered on submit in component B. I'm not sure how to trigger the rendering on submit or how to pass this information via props on submit.
Here is the Parent
class Msg extends React.Component {
constructor(props) {
super(props);
this.storeInput = this.storeInput.bind(this);
this.state = {
name: '',
msg: ''
};
}
storeInput (d) {
this.setState({
name: d.name,
msg: d.msg
})
}
render() {
return(
<div className='msgContainer'>
<Input
passBack={this.storeInput}/>
<Output />
</div>
)
}
}
Here is Component A
class Input extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
name: '',
msg: ''
};
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
this.props.passBack(this.state);
}
render () {
const name = this.state.name;
const msg = this.state.msg;
return (
<div className='form-container'>
<form action="">
<label htmlFor="">name</label>
<input
name='name'
value={name}
onChange={this.handleChange}
type='text'></input>
<label htmlFor="">message</label>
<textarea
name='msg'
value={msg}
onChange={this.handleChange}
rows='5' cols='80'></textarea>
<input
onClick={this.handleSubmit}
type='submit'></input>
</form>
</div>
)
}
}
Here is Component B
class Output extends React.Component {
render () {
return(
<div className='output'>
</div>
)
}
}
Simply pass the state as props to Output like so:
Parent Component:
import React from 'react';
import Input from './Input';
import Output from './Output';
class Msg extends React.Component {
state = { name: '', msg: '' };
storeInput = d => {
this.setState({ name: d.name, msg: d.msg });
};
render() {
// destructure the state
const { name, msg } = this.state;
return (
<div className="msgContainer">
<Input passBack={this.storeInput} />
{/* pass the state as props to Output */}
<Output name={name} msg={msg} />
</div>
);
}
}
export default Msg;
Input.js
import React from 'react';
class Input extends React.Component {
state = { name: '', msg: '' };
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
this.props.passBack(this.state);
this.setState({ name: '', msg: '' }); // clear up the input after submit
};
render() {
const { name, msg } = this.state;
return (
<div className="form-container">
<form onSubmit={this.handleSubmit}>
<label htmlFor="">name</label>
<input
name="name"
value={name}
onChange={this.handleChange}
type="text"
/>
<label htmlFor="">message</label>
<textarea
name="msg"
value={msg}
onChange={this.handleChange}
rows="5"
cols="80"
/>
<input type="submit" />
</form>
</div>
);
}
}
export default Input;
Output.js
import React from 'react';
// destructure the props coming in from Msg
// no need for a class-based component
const Output = ({ name, msg }) => (
<div className="output">
<div>Output</div>
<p>{name}</p>
<p>{msg}</p>
</div>
);
export default Output;
Live demo: https://jsfiddle.net/c8th67zn/