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
Your component receives props as an object.
eg. in your case
You can solve it using destructuring:
you can try
or