skip to Main Content

I’m learning React and I’m building a Site to get familiar with it. I’m playing around with the "use-deencrypt-effect" npm package and im trying to set its values via props, but always the exception "cannot read the property of undefined" is thrown.

This is my child component with deencrypt package:

import * as React from "react";

import { useDencrypt } from "use-dencrypt-effect";


export function TypewriterBig(values) {

  const { result, dencrypt } = useDencrypt();

  React.useEffect(() => {
    let i = 0;

    const action = setInterval(() => {
      dencrypt(values[i]);

      i = i === values.length - 1 ? 0 : i + 1;
    }, 4000);

    return () => clearInterval(action);
  }, [dencrypt]);

  return  <h2 className="TypewriterBig" >{result}</h2>;
  
} 

And this is my parent component where I want to set the props:

import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import GlitchText from 'react-glitch-effect/core/GlitchText/Index';
import ich from './../src/img/ich.jpg';
import Media from 'react-bootstrap/Media'


import { TypewriterBig } from './TypewriterBig';



const Home = () => {

  const displayText = ["SEO-Experte", "Salesforce Experte"];


  return (
    
    <Container className="HomeContainer">
    <Row noGutters className="RowHomeContainer">
      <Col md={6} className="ContentHomeContainer" >
        <div className="ContentHome">

        <h4 className="HelloText">Hello, I'm </h4>

          <GlitchText>
          <h1 className="HomeText">This is my Hometext</h1>
          </GlitchText>
            <TypewriterBig values={displayText} />
        </div>

        
      </Col>
  
  
   
  {/*************************** Picture****************************/}
      <Col md={6} className="ImageHome" >
        <Media>
          <img
            width={'100%'}
            height={'auto'}
            className="mr-3"
            src={ich}
            alt="Generic placeholder"
          />
        </Media>
      </Col>
      
      
    </Row>
  </Container>
    );
  }
   
  export default Home;

How can the Array displayText be declared as prop for Typewriter?

2

Answers


  1. Your component receives props as an object.
    eg. in your case

    console.log(values)
    // {values: ["SEO-Experte", "Salesforce Experte"]}
    

    You can solve it using destructuring:

    function TypewriterBig({ values }) {..}
    
    Login or Signup to reply.
  2. you can try

    export function TypewriterBig({values})
    

    or

    export function TypewriterBig(props) {
        const { values } = props;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search