• 0
Votes
name

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191

Backtrace:

File: /var/www/html/cnasolution/site/application/views/question.php
Line: 191
Function: _error_handler

File: /var/www/html/cnasolution/site/application/controllers/Questions.php
Line: 419
Function: view

File: /var/www/html/cnasolution/site/index.php
Line: 315
Function: require_once

name Punditsdkoslkdosdkoskdo

React carousel using React-Multi-Carousel

I am trying to implement https://www.npmjs.com/package/react-multi-carousel for a card component that has data coming from a rest api. So far my code is as follows, but the carousel does not seem to be implementing? Any ideas why?

code.js

import React, { Component } from 'react'; import './news.css'; import Carousel from "react-multi-carousel"; import "react-multi-carousel/lib/styles.css";  const responsive = {     superLargeDesktop: {         breakpoint: { max: 4000, min: 3000 },         items: 5,     },     desktop: {         breakpoint: { max: 3000, min: 1024 },         items: 3,     },     tablet: {         breakpoint: { max: 1024, min: 464 },         items: 2,     },     mobile: {         breakpoint: { max: 464, min: 0 },         items: 1,     }, };  class News extends Component {      state = {         loading: false,         data: [],         headline: []     }      componentDidMount() {         this.setState({ loading: true })         console.log('app mounted');         fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')             .then(data => data.json())             .then(data => this.setState({ data: data.articles, loading: false }, () => console.log(data.articles)))     }      render() {         return (             

Latest News

{this.state.loading ? "loading..." :
{this.state.data.map((post, indx) => { return (
Alt text
{post.title}

{post.description}

Read More
) })}
}
) } } export default News;
Download script demo [LINK] [Origin]
Download script demo [LINK 2] [Onedrive] Download script demo [LINK 2] [Google drive]

The problem is you put Carousel insid map function

 {this.state.data.map((post, indx) => {                             return (                                 ****                                 
Alt text
{post.title}

{post.description}

Read More
**
** ) })}

also, I think you should change your CSS file. your images are too large. try this one:

 {this.state.loading                     ? "loading..."                     : 
{this.state.data.map((post, indx) => { return (
//Alt text Alt text
{post.title}

{post.description}

Read More
) })}
}

temporrary codesandbox sample

see demo
  • 277
Reply Report