// basic imports
import React, { Component } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { FormattedMessage } from "react-intl";
// react placeholder
import ReactPlaceholder from "react-placeholder";
import "react-placeholder/lib/reactPlaceholder.css";
// reactstrap
import { Card, CardBody } from "reactstrap";
class PopularTags extends Component {
constructor(props) {
super(props);
this.state = {
popular_tags: [
"This is",
"just a",
"mock data",
"for tags.",
"Just to",
"show content",
"placeholder."
],
ready: false
};
}
componentDidMount() {
axios.get("/api/articles/popular_tags/").then(res => {
this.setState({ popular_tags: res.data, ready: true });
});
}
render() {
const { popular_tags } = this.state;
return (
<React.Fragment>
<Card className="sticky_sidebar__item">
<CardBody>
<p className="fs-14" style={{ color: "#818181" }}>
<FormattedMessage id="sidebar.actual_now" defaultMessage="Actual now" />
</p>
{/* tags list */}
{popular_tags!==undefined&&popular_tags.length > 0
? popular_tags.map((tag, index) => {
return (
<React.Fragment key={index}>
<ReactPlaceholder
showLoadingAnimation
type="textRow"
delay={2000}
ready={this.state.ready}
style={{
width: "25%",
display: "inline-block",
marginRight: 10
}}
>
<Link
to={`/tag/${tag.name}`}
className="popular_tags_item"
>
{`#${tag.name}`}
</Link>
</ReactPlaceholder>
</React.Fragment>
);
})
: null}
</CardBody>
</Card>
</React.Fragment>
);
}
}
export default PopularTags;
TypeError: t.map is not a function{popular_tags.length > 0
? popular_tags.map((tag, index) => {
return (
<React.Fragment key={index}>
<ReactPlaceholder
showLoadingAnimation
type="textRow"
delay={2000}
ready={this.state.ready}
style={{
width: "25%",
display: "inline-block",
marginRight: 10
}}
>
<Link
to={`/tag/${tag.name}`}
className="popular_tags_item"
>
{`#${tag.name}`}
</Link>
</ReactPlaceholder>
</React.Fragment>
);
})
: null}Failed to load http://127.0.0.1:8000/api/user/username:
Redirect from 'http://127.0.0.1:8000/api/user/username' to 'http://127.0.0.1:8000/api/user/username/'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.state = {
className: [ 'share' ]
}
handleClick = () =>{
if (this.state.className === 'share'){
this.setState({className: "share active"});
} else {
this.setState({className: 'share'});
}
}<div className={this.state.className} >
<Link to="#" onClick={this.handleClick}>
<i className="icon-share-1"></i>
<u>Поделиться</u>
</Link>
</div>