Instagram clone:
I want to check if I follow my follower then display <button>unfollow</button> or if not display <button>follow</button>
var IfollowAndHeFollowMe;
myfollowers.map(follower => {
return(
<div>
<div>{follower.userName}</div>
{ IfollowAndHeFollowMe =
myfollowings.filter((following) => following.userName == follower.userName)
}
// this doesn't work
{ IfollowAndHeFollowMe.length > 0 ? return( <button>unfollow</button>): return(<button>follow</button>) }
// and this also doesn't work
{ return IfollowAndHeFollowMe.length > 0 ? <button>unfollow</button> : <button>follow</button>}
</div>
)
})
//https://instagram-app-clone.netlify.app/ --- just for phone ---
JSX Code inside {} should be written as statements.
https://reactjs.org/docs/conditional-rendering.html
const followers = ['John', 'Hanna'];
function RenderMap() {
return (
<React.Fragment>
{followers.map(follower => (
<div>
<span>{follower}</span>
{followers.length > 0 ? (
<button>unfollow</button>
) : (
<button>follow</button>
)}
</div>
))}
</React.Fragment>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
// now dont have errors but its allways display button with follow text
{Data[2][0].followers.map(follower => {
idFollowers++;
return (
<div className="follower" id={idFollowers} >
<img src={follower.profilna} className="profilnaFollower" alt="" />
<div className="userInfoFollower">
<h3>{follower.userName}</h3>
<p>{follower.name}</p>
</div>
{dbFollow = Object.entries(Data[2][0].following).filter(following => following.userName == follower.userName)}
{dbFollow.length > 0 ? (<button>unfoldasdaslow</button>) : (<button>fodsadsllow</button>)}
</div>
)
})}
</div>
Related
I have an array of files and I want certain ones to be displayed and hyperlinked. I'm using the map method and when only 1 file displays, it links properly. I need some help with the syntax when multiple files must be displayed.
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
if (this.props.channelSelectedData.length >= 1){
return(
<div className="channel-detail-box">
<p>Outages:
<a href={mappings[this.props.channelSelectedData.map(inspection => {
return inspection.outage
})]}>
{this.props.channelSelectedData.map(inspection => {
return inspection.outage + ' '
})}</a>
</p>
</div>
)
}
else {
return (
<div>
<p>No data found</p>
</div>
)
}
}
}
Is this what you are looking for ?
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
const { channelSelectedData } = this.props
if (channelSelectedData.length === 0) {
return <div>
<p>No data found</p>
</div>
}
return <div className="channel-detail-box">
<p>Outages: {channelSelectedData.map(({ outage }) => <a href={mappings[outage]}>{outage}</a>)}</p>
</div>
}
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
};
if (!channelSelectedData || channelSelectedData.length <= 0) {
return (
<div>
<p>No data found</p>
</div>
);
}
const links = channelSelectedData.map(({ outage }) => (
<a href={mappings[outage]}>{outage}</a>
));
return (
<div className="channel-detail-box">
<p>Outages: {links}</p>
</div>
);
If I am understanding the rest of your question correctly, I believe your issue is just using map at the incorrect point. What map does is returns an array of values which in this case would be an array of applicable tags.
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
if (this.props.channelSelectedData.length >= 1){
return(
<div className="channel-detail-box">
<p>Outages:
<>
{
this.props.channelSelectedData.map(chanel=>{
return (
<a href={mappings[chanel]}>
{chanel+' '}
</a> )
})
}
</>
</p>
</div>
)
}
else {
return (
<div>
<p>No data found</p>
</div>
)
}
}
I've read the documentation, I don't know why it's working but it's messed up. Here's my code :
function CarouselItem(props) {
const { post } = props
return (
<React.Fragment>
<div>
<img src={`http://localhost:5000/image/${post.foto}`} />
<p className="legend">{post.judul}</p>
</div>
</React.Fragment>
)
}
function NewsItem(props) {
const { posts } = props.post
let content = posts.map(item => <CarouselItem key={item._id} post={item} />)
return (
<div>
<Carousel showThumbs={false}>{content}</Carousel>
</div>
)
}
It turns out like this :
Use this in the first line of your .js file:
import 'react-responsive-carousel/lib/styles/carousel.min.css';
In the following snippet of code, I am iterating over the object's properties (PADS in this case), using the lodash library map method. It accepts the object, and a callback function as arguments.
Another mention would be that I am trying to incorporate bootstrap features with a react child component.
let count = 0;
let countCount = 0;
const drumPadItems = _.map(PADS, padElem => {
count++;
countCount++;
if(countCount === 1){
return (
<div className="row">
<DrumPad letter={padElem.letter} url={padElem.url}/>
);
}
if(count > 3){
count = 1;
return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
);
}
if(countCount === 9){
return (
<DrumPad letter={padElem.letter} url={padElem.url}/>
</div>
);
}
return <DrumPad letter={padElem.letter} url={padElem.url}/>;
});
When I run the application, I get the following compilation error:
ERROR in ./src/components/drum_pad_list.js
Module build failed: SyntaxError: Unexpected token, expected } (76:19)
if(count > 3){
count = 1;
^
return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
);
}
EDIT:
The PADS object has the following structure:
{
q: {
label: "Label1",
letter: "Q",
url: "https://..."
},
w: {
label: "Label2",
letter: "W",
url: "https://..."
}
...
}
The desired output would be something like the following:
<div className="row">
<DrumPad letter='Q' url='https://...'/>
<DrumPad letter='W' url='https://...'/>
<DrumPad letter='E' url='https://...'/>
</div>
What would be a solution for this ?
Your JSX is incomplete as there is no closing </div>. You have several incomplete JSX and you cannot "concat" partial JSX. This will fix the first:
<div className="row">
<DrumPad letter={padElem.letter} url={padElem.url} />
</div>
To map 9 of your elements you can do this (the key prop must be unique and is required for React's bookkeeping):
// use capitalize for function name
const DrumPadItems = () => (
<div className="row">
{
Object.values(PADS)
.slice(0, 9)
.map(padElem => <DrumPad
letter={padElem.letter}
url={padElem.url}
key={padElem.letter} />)
}
</div>
)
This will "render" a list of:
<div className="row">
<DrumPad />
<DrumPad />
...
</div>
...
I'd recommend to use object destructuring and to make PADS a prop and then you can use it like that:
const DrumPadItems = ({PADS}) => (
<div className="row">
{
Object.values(PADS)
.slice(0, 9)
.map(({letter, url}) => <DrumPad
letter={letter}
url={url}
key={letter} />)
}
</div>
)
// somewhere else
<div>
<DrumPadItems PADS={this.state.PADS} />
<OtherStuff />
</div>
BTW: you don't need lodash assuming that PADS is an Array.
1) You are missing </div>
if(countCount === 1){
return (
<div className="row">
<DrumPad letter={padElem.letter} url={padElem.url}/>
</div> {/* DIV MISSING */}
);
}
2) Too much <div>
if(count > 3){
count = 1;
return (
</div> {/* TOO MUCH DIV */}
<div className="row">
<DrumPad letter={padElem.letter} url={padElem.url}/>
</div> {/* DIV MISSING */}
);
}
3) You are missing </div>
if(countCount === 9){
return (
<div> {/* DIV MISSING */}
<DrumPad letter={padElem.letter} url={padElem.url}/>
</div>
);
}
JSX wants the entire return markup into a one container like return(<div>...</div>);
I believe there is another way to do what you want, if you explain it to us
How to show No Result message when the search result is empty with in map() ?
export class Properties extends React.Component {
render () {
const { data, searchText } = this.props;
const offersList = data
.filter(offerDetail => {
return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
})
.map(offerDetail => {
return (
<div className="offer" key={offerDetail.id}>
<h2 className="offer-title">{offerDetail.title}</h2>
<p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p>
</div>
);
});
return (
<main>
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList }
</div>
</main>
);
}
}
With a ternary operator:
<main>
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList.length ? offersList : <p>No result</p> }
</div>
</main>
If offersList array is empty, it's length will equal to 0. You can make easy condition:
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList.length ? offersList : <p>No Result</p> }
</div>
{offersList.length ? (
// html markup with results
) : (
// html markup if no results
)}
I have this in jsx where is an array like breadcrumb = ['food','hotdogt'] but I got an error of unexpected token .?
{breadcrumb.map(obj => {
{obj}
})}
Write it like this:
{
breadcrumb.map(obj => {
return <div> {obj} </div>
})
}
or
{
breadcrumb.map(obj => <div> {obj} </div>)
}
or
{
breadcrumb.map(obj => obj)
}
{} braces are required when you are using js code inside html element, you are using {obj} but didn't use any html element. And you forgot to use return also.
Check this example:
var breadcrumb = ['food','hotdogt'];
var App = () => {
return(
<div>
{
breadcrumb.map(obj => <p key={obj}> {obj} </p>)
}
{
breadcrumb.map((obj, i) => {
return <span key={obj}>
<span className="bold"> {obj} </span>
{i != breadcrumb.length -1 ? <span className="seperator"> -> </span> : null}
</span>
})
}
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>