CODEWITHSUNDEEP
javascriptreactjsbuttonreduxstate
Christina W
Christina W

Reputation: 27

There is an error on the return ( and I cannot understand why

import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

class MyStories extends React.Component {


  addFavorite = (e) => {
    this.setState({
      bgcolor: "blue"
    })
  }


  render () {
  const { stories }  = this.props;
    const { storyBriefs }  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

//refactor - create a button that will allow for us to mark which our favorites are

  return (
    { this.props.storyBriefs }
   );
  }

 }
const mapStateToProps = state => {
  return {
    stories: state.myStories
  }
 }


export default connect(mapStateToProps)(MyStories)

getting this error

./src/components/MyStories.js Line 26: Parsing error: Unexpected token, expected ":"

    return (
      ^
   { this.props.storyBriefs }
  );
 }

I converted a functional component to a class component so that I could manipulate the state in order to change the color of the favorite button -- (I cannot use hooks or redux for the button function) Can anyone tell me what I am doing wrong?

Upvotes: 0

Views: 47

Answers (3)

Christina W
Christina W

Reputation: 27

This was the final code and it works, 

import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

class MyStories extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      button: false
    };
    this.addFavorite = this.addFavorite.bind(this);
  }

  addFavorite = id => {
    this.setState({
      button: id
    });
  };

  render() {
    return this.props.stories.map(t => (
      <div className="menu-inner-container">
        <p key={t.id}>
          <Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
          <button
            key={t.id}
            className={this.state.button===t.id ? "buttonTrue" : "buttonFalse"}
            onClick={() => this.addFavorite(t.id)}
          >
            Favorites
          </button>
        </p>
      </div>
    ));
  }
}

//refactor - create a button that will allow for us to mark which our favorites are
const mapStateToProps = state => {
  return {
    stories: state.myStories
  };
};

export default connect(mapStateToProps)(MyStories);

Upvotes: 0

brycelikesdogs
brycelikesdogs

Reputation: 151

You need to complete the ternary operator by adding :

 const storyBriefs  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

: [] // you need something here after the ':', an empty array could be useful in this case

 return storyBriefs

or you could shorten it to 

 return stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

Upvotes: 1

Leo Baron
Leo Baron

Reputation: 79

As Jaromanda X said { this.props.storyBriefs } isn't valid. you need to provide the key value pair unless the variable doesn't have dot notation then you can define the object like that

Upvotes: 0

Related Questions