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;

DevLoverUmar · Accepted Answer · 2020-11-19 15:13:15Z

1

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>

answered Nov 19, 2020 at 15:13

DevLoverUmar

14.3k16 gold badges80 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MARYAM Over a year ago

thank you can you please take a look at this question if you can help with it stackoverflow.com/questions/64909431/…

Collectives™ on Stack Overflow

error Cannot read property when displaying input value in reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related