To render related posts in each section from posts what can I add in my code to render related posts category-wise for simplicity for users...
Sectioninner.js
import React, { useState, useEffect,useRef } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
function Sectioninner() {
{postsd.map((post) => {
return (
<div key= {post._id}className="hey">
{post &&
<div className="relatedmoviescontent">
<h3 className='relatedmoviesheading'>Related Movies</h3>
<div className='swipercontainer'>
<Swiper
modules={[Navigation, Pagination, Scrollbar,A11y]}
spaceBetween={0}
slidesPerView={1}
navigation
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
</div>
</div>
)}
}
export default Sectioninner
Related
I am using express nodejs to create a fullstack app, this page has to show users and products but it is rendering a blank page. If I delete the {} of user, it renders the page but with no results.
import React, { useContext, useState } from 'react';
import CoffeeContext from '../contexts/CoffeeContext';
import { Link } from "react-router-dom";
import '../App.css'
import UserContext from '../contexts/UserContext';
function CoffeeList(props) {
let { deleteCoffee } = useContext(CoffeeContext);
let { user } = useContext(UserContext)
return (
<CoffeeContext.Consumer>
{
({ coffee }) => {
return <div>
<h1>Posts</h1>
<h4>Hello <span> {user.username}'Insert user's name here' Thanks for visiting our website!</span></h4>
<button>Add New Post</button>
<div>
{coffee.map((c) => {
console.log(coffee)
return (
<div key={c._id}>
<h2>{c.name}</h2>
<Link to={`/edit/${c._id}`}>
<button>Edit</button>
</Link>
<button onClick={() => { deleteCoffee(c._id)}}>Delete</button>
<h6>{user.username}</h6>
</div>
)
})}
</div>
</div>
}
}
</CoffeeContext.Consumer>
);
}
export default CoffeeList;
I'm sorry in advance for my ignorance, But its been a while since I coded, and I need a little help with this basic thing, Im trying to reach name, and display it on screen when I click a button, but i just can't figure it out, can u help me and explain what you did so I can know for the next time? looked manuals and articles about how to do it but you guys are just simply better.
my code:
functional (pokeAPI.ts):
import React from "react";
import axios from 'axios'
export const getPokemon=()=>{
axios.get("https://pokeapi.co/api/v2/pokemon?limit=151").then((response)=>{
response.data.results.map((cont : string,index : number) => console.log(
cont
));
})
}
app.tsx:
import './App.css';
import React from 'react';
import {getPokemon} from './func/pokeAPI';
function App() {
return (
<div>
<button onClick={getPokemon}>Cli</button>
</div>
);
}
export default App;
Here you go! Since you're using typescript, I created a PokemonData interface as well.
import React from 'react'
import axios from 'axios'
import "./styles.css";
interface PokemonData {
name: string
url: string
}
export default function App() {
const [pokemons, setPokemons] = React.useState<null|PokemonData[]>(null)
const onClick = async () => {
axios.get("https://pokeapi.co/api/v2/pokemon?limit=151").then((response)=>{
console.log(response.data.results)
setPokemons(response.data.results)
})
}
return (
<div className="App">
<button onClick={onClick}>Get pokemon</button>
{pokemons?.map((pokemon) => (
<div key={pokemon.name}>
<p>{pokemon.name}</p>
<p>{pokemon.url}</p>
</div>
))}
</div>
);
}
I also wrote a Codesandbox here so you can check it out
Edit: Another version of the return statement if optional chaining isn't supported on your project's version
return (
<div className="App">
<button onClick={onClick}>Get pokemon</button>
{pokemons && pokemons.map((pokemon) => (
<div key={pokemon.name}>
<p>{pokemon.name}</p>
<p>{pokemon.url}</p>
</div>
))}
</div>
);
}
I'm trying to wrap my head around the MERN stack. So far I've managed to query my database and get the data on an API endopoint, but I'm having some trouble getting it to show up on my front-end.
Here's my fronted code :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component<{}, {res:any}> {
constructor(props:any) {
super(props);
this.state = {res: Array};
}
callAPI() {
fetch("http://localhost:5000")
.then(res => res.json())
.then(json => this.setState({res: json}));
}
componentWillMount() {
this.callAPI();
}
render() {
// WORKS
console.log(this.state.res[0]);
// DOESN'T WORK
console.log(this.state.res[0].name);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)};
}
export default App;
As you can see it's just a modified version of the default React homepage. I just added a state and fetching data from my backend.
The problem comes when I try to console.log my data.
If I console.log(this.state.res[0]), everything is fine, and I get { "_id": "62207b47d40bca8ea8b60560", "name": "Patère", "checked": false, "links": [ "" ] } in my console. But if I try to only log the name, I get Uncaught TypeError: this.state.res[0] is undefined, which is weird, since it managed to display this.state.res[0] just fine before ?
What's causing this and how can I fix it ?
Thank you in advance.
enter image description hereUse Same component multiple times failed. How can I get the thing done?
Why it's render only single element even though Multiple components Added.?
I use Todo Component multiple times in the Todos component, But it's give only just one element rendered.
Todo.js File 👇
import React, { Component } from 'react'
export default class Todo extends Component {
render() {
return (
<h3 className="text-dark text-center p-1 bg-light">
<i className="fas fa-times-circle fa-sm float-left mr-1 text-danger"></i> Task {this.props.num}
<input type="checkbox" className="mr-2 float-right"/>
</h3>
)
}
}
Todos.js file 👇
import React, { Component } from 'react'
import Todo from "./Todo"
export default class Todos extends Component {
render() {
return (
<div>
<Todo num="1"></Todo>
<Todo num="2"></Todo>
<Todo num="3"></Todo>
</div>
)
}
}
Output I got
Expected output
So I have a component(Posts) in which a loop through all the posts from the Database. In the component, I 'embedded' another component(PostItem) so I dont have to create a different component for viewing individual entries. Now inside the PostItem component I have another component with the name of 'PostGallery'.
This is the current code that I have in PostItem.js file:
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PostGallery from '../posts/PostGallery';
const PostItem = ({
post: { _id, text, name, files, avatar, user, likes, comments, date },
}) => (
<article className={_id}>
<Link to={`/posts/${_id}`}>
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
{files.slice(0, 5).map((file, index) => (
<PostGallery key={index} post={file} />
))}
</div>
</div>
</Link>
</article>
);
PostItem.propTypes = {
post: PropTypes.object.isRequired,
};
export default connect(
null, null
)(PostItem);
When posting an entry the user can post URL from images separated by comma which is working just fine. The problem comes when displaying it in the front-end.
This is what I have in my PostGallery component:
import React from 'react';
import PropTypes from 'prop-types';
const PostGallery = ({
post: { files }
}) => {
return (
<div className="">
{post.files.length > 0 ? (
post.files.map(file => (
<img key={file} src={file} alt="" />
))) : (
<p>No images found</p>
)
}
</div>
);
};
PostGallery.propTypes = {
post: PropTypes.object.isRequired,
};
export default PostGallery;
I believe this should be easy but somehow its just now working and the console it's not trowing me any errors related to it. So if you guys can help...
Thanks!