error Cannot read property when displaying input value in reactjs

Question

i'm getting this error: TypeError: Cannot read property 'setState' of undefined
when i try to display an input value in a pdf using @react-pdf/renderer package.
the error exactely is in : {this.setState.title} line
could someone tell me what cause this error in my case, thank you in advance. this is my code :

import React, { Component } from 'react';
import { PDFDownloadLink, Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>{this.setState.title}</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
    
  </Document>
);

class Form extends Component {
  state = { 
    title: '',
    
    url: null };

    onChange = input => e => {
        this.setState({
            [input]: e.target.value
        });
    }

  onRender = ({ blob }) => {
    this.setState({ url: URL.createObjectURL(blob) });
  };

  render() {
    return (
        <div>
            <input onChange={this.onChange('title')} name="title" type="text" placeholder="Post Title" className="form-control" />
            Download your PDF here:
            <PDFDownloadLink
                document={<MyDocument/>}
                fileName="doc.pdf">
                    {({ blob, url, loading, error }) => (
                        loading ? 'Loading...' : 'Download!'
                    )}
            </PDFDownloadLink>
        </div>
    );
  }
}

export default Form;

score 1 · Accepted Answer · answered Nov 19 '20 at 15:13

The problem is with using this in a functional component at this point

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>{this.setState.title}</Text>    /// this point
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
    
  </Document>
);

You should pass this value as a prop to this component as

const MyDocument = (props) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>{props.title}</Text>    /// this point
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
    
  </Document>
);

And pass title as a prop

<PDFDownloadLink
                document={<MyDocument title={this.state.title}/>}
                fileName="doc.pdf">
                    {({ blob, url, loading, error }) => (
                        loading ? 'Loading...' : 'Download!'
                    )}
            </PDFDownloadLink>

thank you can you please take a look at this question if you can help with it https://stackoverflow.com/questions/64909431/getting-error-when-exporting-variable-in-reactjs?noredirect=1#comment114760022_64909431 — MARYAM, Nov 19 '20 at 16:01

error Cannot read property when displaying input value in reactjs

1 Answers1