score:1
Accepted answer
if you want to do the way you tried, i suggest using useref(). it's a way to control your html elements in jsx. the idea is similar to yours, but one that actually works:
const testimonialelem = useref();
useeffect(() => {
let idx = 1;
function updatetestimonial() {
const { name, position, photo, text } = testimonials[idx];
testimonialelem.current.innerhtml = text;
idx++;
if (idx > testimonials.length - 1) {
idx = 0;
}
}
setinterval(updatetestimonial, 3000);
}, []);
i have only refed one element, the p
tag with the main text of the testimonial, but you can easily create separate refs for the rest of the dynamic components. here is a sandbox: https://codesandbox.io/s/old-monad-ojxn5?file=/src/app.js
please note that given that you use react, taking advantage of state variables should be considered.
Source: stackoverflow.com
Related Query
- TypeError during Jest's spyOn: Cannot set property getRequest of #<Object> which has only a getter
- React: Cannot set property 'lastEffect' of null
- html5 getUserMedia Cannot set property 'srcObject' of null
- Reactjs: Uncaught TypeError: Cannot set property 'innerHTML' of null
- TypeError: Cannot set property 'src' of null
- Unhandled Rejection (TypeError): Cannot set property 'innerText' of null in React-hooks
- useRef() error: cannot set property disabled of null when trying to focus on a textarea
- TypeError Cannot read property 'country_code' of null
- TypeError: Cannot set property 'className' of null
- React, HTML and JavaScript: TypeError: Cannot set property 'innerHTML' of null
- ReactJS TypeError: Cannot set property 'onclick' of null
- TypeError: Cannot set property 'innerHTML' of null while using React.Js
- TypeError: Cannot set property 'innerHTML' of null
- ReactJS TypeError: Cannot set property 'innerHTML' of null even though it's been defined
- TypeError: Cannot set property 'onscroll' of null
- Trying to change the inner element by using get element and it throws error TypeError: Cannot set property 'innerHTML' of null
- In a React.js APP, I caught this: TypeError: Cannot set property 'onclick' of null
- Cannot read property 'getHostNode' of null
- Uncaught TypeError: Cannot read property 'props' of null
- TypeError when using React: Cannot read property 'firstChild' of undefined
- React-router: TypeError: Cannot set property 'props' of undefined
- Cannot read property 'refs' of null react error react js
- Uncaught TypeError: Cannot read property 'state' of null in react
- Cannot read property 'style' of null - Google Sign-In Button
- cannot read property of null doing destructing
- React component returning cannot read property '__reactInternalInstance$ of null after trying to access array
- Cannot destructure property of null
- Error: Cannot read property 'UIAppFonts' of null
- Cannot read property '_currentElement' of null
- Cannot set property createElement of #<Object> which is only a getter
More Query from same tag
- Apollo Form State Management
- How is React component's props updated asynchronously?
- Filtering data with buttons in React
- Add multiple value in array
- React: apply multiple filters to array
- change Material UI Typography into styled-component
- React Formik Cannot set property 'props' of undefined
- Toggling a CSS class when a React.js component gets updated
- Why got "This expression is not callable..." errors from typescript and react js?
- Context API updating state causes looped requests
- Count time between 2 dates for multiple forms using reactjs
- Firing Redux actions in response to route transitions in React Router
- How to read data from URL using JavaScript?
- State does not update React Hook
- broken logo image when importing from json file in React App
- How to setup global variables in apollo-client
- Why redux toolkit boolean toggle doesn't work?
- Are helper functions defined inside a React component re-evaluated every time the component is used?
- How to achieve tag agnostic styled components?
- How to map a component with different array's item
- React Syntax Error. Unterminated Regular Expression
- React: Batching state updates tied to event listeners
- How do I force leaflet to update the map?
- Jest mock async function from default import
- Access cart data object to create total amount
- ReactJS: get mediumtext from MySQL and view formatted text
- React state - what I am doing wrong?
- React thinks my Function Component is an Object (rather than a function) in a
- React unable to use response to GET request
- Can't close the Hamburger Menu in ReactJS