please pass data from the input field

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;

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top