React JS - Transform a static pagination to dynamic from JSON

I have a ReactJS code below made for a SO user Piotr Berebecki. The code is working succefully It is a handle pagination returning items from an array. I want to do the same thing but returning data from JSON DB How can I do? How can I solve it? Thank you. Here is the app in the CodePen.

Here is My DB Json. I want only return the images (named as 'fotos'). It will replace the 'todos' in the array in the second code below
. Note: It must be made by Axios.


"interiores": [

"nome": "house 1",
"descricao": "This is the description of the house 1",
"fotos": [
"int_02", "int_02", "int_02", "int_02", "int_02"
]

]



Code:

import React, Component from 'react'

class Todo extends Component
constructor()
super();
this.state =
todos: ['a','b','c','d','e','f','g','h','i','j','k'],
currentPage: 1,
todosPerPage: 3
;
this.handleClick = this.handleClick.bind(this);


handleClick(event)
this.setState(
currentPage: Number(event.target.id)
);


render()
const todos, currentPage, todosPerPage = this.state;

// Logic for displaying todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

const renderTodos = currentTodos.map((todo, index) =>
return <li key=index>todo</li>;
);

// Logic for displaying page numbers
const pageNumbers = ;
for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++)
pageNumbers.push(i);


const renderPageNumbers = pageNumbers.map(number =>
return (
<li
key=number
id=number
onClick=this.handleClick
>
number
</li>
);
);

return (
<div>
<ul>
renderTodos
</ul>
<ul id="page-numbers">
renderPageNumbers
</ul>
</div>
);



export default Todo;


1 Answer
1

It seems like you're asking how to handle the data once you've already made the call, this is how I think you should do it using componentDidMount I haven't tested it yet, but should give you a good starting point.


"interiores": [

"nome": "house 1",
"descricao": "This is the description of the house 1",
"fotos": [
"int_02", "int_02", "int_02", "int_02", "int_02"
]

]

import React, Component from 'react'

class Todo extends Component
constructor()
super();
this.state =
todos: ['a','b','c','d','e','f','g','h','i','j','k'],
currentPage: 1,
todosPerPage: 3 ,
fotos: '',
;
this.handleClick = this.handleClick.bind(this);


handleClick(event)
this.setState(
currentPage: Number(event.target.id)
);

async componentDidMount()
//make call to database and set the db data to your state.
const dbData = axios.get('http://yourapi.com/todods')
.then(function (response)
this.setState(fotos: response.data.interiores[0].fotos)
)
.catch(function (error)
console.log('error:', error);
);

render()
const todos, currentPage, todosPerPage = this.state;

// Logic for displaying todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

const renderTodos = currentTodos.map((todo, index) =>
return <li key=index>todo</li>;
);

// Logic for displaying page numbers
const pageNumbers = ;
for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++)
pageNumbers.push(i);


const renderPageNumbers = pageNumbers.map(number =>
return (
<li
key=number
id=number
onClick=this.handleClick
>
number
</li>
);
);

return (
<div>
<ul>
this.state.fotos? this.state.fotos : 'nothing to display'
</ul>
<ul id="page-numbers">
renderPageNumbers
</ul>
</div>
);



export default Todo;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.