score:0
does this work as a functional component? note that you are no longer accessing this.props.data
but can instead just directly access the destructured data
variable.
const postlist = ({data}) => {
const posts = data.allmarkdownremark.edges
return (
<layout>
<head title="posts" />
<div classname={layoutstyles.pageheader}>
<h2>posts</h2>
<span>just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div classname={postpagestyles.postitem} key={node.fields.slug}>
<div classname={postpagestyles.postitemtitle}>
<h2>{title}</h2>
<span>posted on {node.frontmatter.date}</span>
</div>
<div>
<p>{node.excerpt}</p>
<link to={`${node.fields.slug}`}>
<span>continue reading</span>
<span role="img"> 👉🏼</span>
</link>
</div>
</div>
)
})}
</layout>
)
}
export default postlist
export const query = graphql`{...}`
score:1
i have managed to resolve this. after much googling.
const postlist = props => {
const { currentpage, numpages } = props.pagecontext
const isfirst = currentpage === 1
const islast = currentpage === numpages
const prevpage = currentpage - 1 === 1 ? '/' : (currentpage - 1).tostring()
const nextpage = (currentpage + 1).tostring()
const posts = props.data.allmarkdownremark.edges
return (
<layout>
<head title="posts" />
<div classname={layoutstyles.pageheader}>
<h2>posts</h2>
<span>just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div classname={postpagestyles.postitem}>
<div classname={postpagestyles.postitemtitle}>
<h2>{title}</h2>
<span>posted on {node.frontmatter.data}</span>
</div>
<div>
<p>{node.excerpt}</p>
<link to={`${node.fields.slug}`}>
<span>continue reading</span>
<span role="img"> 👉🏼</span>
</link>
</div>
</div>
)
})}
{!isfirst && (
<link to={prevpage} rel="prev">
← previous page
</link>
)}
{!islast && (
<link to={nextpage} rel="next">
next page →
</link>
)}
{array.from({ length: numpages }, (_, i) => (
<link
key={`pagination-number${i + 1}`}
to={`posts/${i === 0 ? '' : i + 1}`}
>
{i + 1}
</link>
))}
</layout>
)
}
export default postlist
to use the consts
i had to change
const postlist = ({ data }) => {
const posts = data.allmarkdownremark.edges
...
to
const postlist = props => {
const posts = props.data.allmarkdownremark.edges
which then allowed me to use const { currentpage, numpages } = props.pagecontext
score:4
you cannot indeed use const
in a class "just like that":
class app extends react.component {
const a = 2 // will throw a syntax error
render(){
return <div>hello world</div>
}
what you can do is either not use a const to declare the variable as a class field:
class app extends react.component {
a = "john";
render(){
//now you can access a via `this`
return <div>{`hello ${this.a}`}</div>
}
or if you don't need it to be to be somehow "bound" to your component, you can declare it outside of the class.
const a = "john"
class app extends react.component {
render(){
//you can simply access `a`
return <div>{`hello ${a}`}</div>
}
Source: stackoverflow.com
Related Query
- Unable to use const within a class in React
- Unable to use Arrow functions inside React component class
- Should one use const when declaring an arrow function in React class
- How to use react-jss within react class Components?
- Unable to Ignore Block within React Class Components with istanbul ignore next to gain coverage
- Can you use map function within a class React
- When to use ES6 class based React components vs. functional ES6 React components?
- What will happen if I use setState() function in constructor of a Class in ReactJS or React Native?
- Class extends React.Component can't use getInitialState in React
- Unable to use useState in class component React.js
- Typescript with React - use HOC on a generic component class
- How to use Emscripten compiled JavaScript within React / React Native
- Is there a way to use React Components within Elm?
- Unable to use React.memo in React Native app
- How to use redux-toolkit createSlice with React class components
- Do React Hooks use more memory than Class Components?
- Cannot call a class as a function, React router show error in console if i use es6 format
- React native Unable to use local tmp file path for Image.source iOS
- Material UI: Use theme in React Class Component
- How do i call a method within another method in react class Es6
- Use one React project within another
- How to avoid very long paths and use absolute paths within a Create React App project?
- Use custom Angular directive from within React
- Unable to use material-ui-pickers in React js web application
- Const = () => vs Class Functions function name() {} in React Native
- How can I use react navigation props in class component?
- How to use React Context inside function of Class component
- use React Hooks to change the elements class Name and siblings
- Unable to use Web Components in React
- Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?
More Query from same tag
- React functional component state always logs initial value
- Webpack import from files that use module.exports
- Reactjs which is the better way to use change handler
- How to get one elements to slide in while the other slides out, using react and material-ui?
- get data from promiseresult object of promise.all and axios call
- How to put your object data from a form under specific properties
- Why does this log [object Object], [object Object]?
- Relay local state management. How to add and use flag on client side?
- How to change array completely with a new array in React.JS with useState?
- React render state not the real state
- show hide div in react.js
- gatsby-node isn't building tags pages
- How to pass event in onClick in ReactJS
- how to comment reactjs mark up code in visual code?
- Enable css module in react 16.7
- Using setState inside useEffect on updating forms
- Unable to autocomplete tags in reactjs jsx
- Shallow test component, complain about required props gotten from mapStateToProps and mapDispatchToProps
- React usestate components only show on change
- React <Link to...> when table row is clicked
- How to get parent props/state from grandchild in reactjs
- Cannot make an "Errors" Object in a React Login Form Component's state function properly
- React + Redux - Trigger select onChange() on initial load
- hide div by selecting radio button "no" - reactjs
- I can't get this code to work for my project?
- Calling update hook on returned axios call
- Incorrect Integer value: 'undefined' for column 'user_id'
- How to know if audio ended in React js with toggle button
- How to pass a function with parameters in react with typescript
- When to call function vs function() in react onClick?