mardi 2 mars 2021

How to use a Array as a prop for React component

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?




Aucun commentaire:

Enregistrer un commentaire