score:2
get rid of the shorten method and try this
render(){
const shorten = this.props.details ? this.props.details.substring(0, 100) : '';
return (
<div>
<p classname="text-muted font1-1">{shorten}</p>
</div>
);
}
score:1
did you tried to console.log the value of shorten? do you get undefined in the console too?
if so, is it possible that you are not waiting for the api value.
are you familiar with the concept of promise ? my hypothesis is that you get undefined because you are trying to see the result without have some async/await in place (or some other way to wait for the promise to be resolved), which means that you are trying to read the value before it actually exist, that is why you get the undefined
score:1
add a null check before use substring
, like this: let res = this.props.details && this.props.details.substring(100,0);
score:1
if you're sure that the prop is pass probably there's some state of the parent that causes this.props.details
to be undefined.
ther are 3 solutions.
- when you're passing the prop you can add a check
<yourcomponent details={this.state.whatever || '' } />
- you can check it inside the component
let res = this.props.details && this.props.details.substring(100, 0);
- don't render the component until all required props are passed and they're defined.
score:1
since the error happens just before the api call is made, use optional chaining (?.
) to check whether the string to be truncated is available yet.
let res = this.props.details?.substring(100, 0);
Source: stackoverflow.com
Related Query
- React Facebook Login with Enzyme mount - TypeError cannot read property 'parentNode' of undefined
- React : TypeError : Cannot read property 'fullname' of undefined
- React js and apexcharts Unhandled Rejection TypeError Cannot read property 'length' of undefined
- React - uncaught TypeError: Cannot read property 'setState' of undefined
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
- React enzyme testing, Cannot read property 'have' of undefined
- Cannot read property 'history' of undefined (useHistory hook of React Router 5)
- React - TypeError: Cannot read property 'props' of undefined
- React Router: Cannot read property 'pathname' of undefined
- React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined
- TypeError when using React: Cannot read property 'firstChild' of undefined
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- React Tutorial: TypeError: Cannot read property 'props' of undefined
- TypeError: Cannot read property 'javascript' of undefined + terser webpack plugin + react js
- React Material-UI Modal TypeError: Cannot read property 'hasOwnProperty' of undefined
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- React propType cannot read property of undefined
- React cannot read property map of undefined
- TypeError: Cannot read property 'prototype' of undefined React Express
- TypeError: Cannot read property 'error' of undefined on React Chrome Extension
- mocha + jsdom + React TypeError: Cannot read property 'addEventListener' of undefined
- React - Cannot read property 'call' of undefined
- Cannot read property 'forEach' of undefined in React
- Cannot read property 'call' of undefined Webpack Bootstrap React
- Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item
- Cannot read property 'map' of undefined with react hooks
- Cannot read property 'map' of undefined in React
- React Redux: Cannot read property 'dispatch' of undefined
- React Jest test Cannot read property 'pathname' of undefined
More Query from same tag
- How do I render components with different layouts/elements using react-router-dom v6
- Cant connect React to Graphcool backend
- React: is accessing the state of children an anti-pattern?
- Saving Images React To Nodejs
- Set a fixed margin between list component
- make a custom class globally useable for material-ui
- How to convert this create store with thunk to a promise based?
- Puppeteer - how to click on an inner element
- React Shared Counter Increment
- react redux lead to infinite loop while using useeffect and dispatch
- Adding html class in react dynamically using function?
- Using react Hook, shows missing dependency in case of useCallback
- Faced problem with interval not being cleared in React
- asp.net core 2.1 Webpack 4 React not starting correctly
- ReactJS: Cannot read property 'value' of null when getting selected value
- variable undefined in useEffect
- How to render component with for loops in react
- Yotpo reviews and galleries not loading on page change
- VSCode: Cannot find module 'antd' or its corresponding type declarations
- How to get audio element?
- Why doesn't useSelector doesn't re-execute JSX
- Need to conditionally render a section with X amount of rows depending on user selection
- TypeError: Cannot read property 'version' of undefined at Dotenv.apply
- How can I select only one row in a table(grid)?
- how can i make a get request in axios to get the info of a user by clicking on his name using react.js
- Redirection from one page to another without showing that file path in Routes.js file
- rerender component when my state change state in ReactJS
- How do I deploy an react app to azure and change the default page
- "Error: Invalid hook call." when importing React component from shared component library in monorepo (turborepo & npm workspaces)
- How do I make an inpage link with React?