CODEWITHSUNDEEP
javascriptreactjsreduxreact-props
saladWithRanch
saladWithRanch

Reputation: 168

How can I call a function inside of a .map of arrays?

I am passing down a function through props that capitalizes a few items being mapped over. I am getting an error on the item portion of item.creator.I am just wondering why I am recieving the error and not able to just call the function inside of the map. Thanks for your help.

Error message is Line Parsing error: Unexpected token, expected ",".

PARENT COMPONENT

export default function MainContent() {
  const techContent = useSelector(displayTechContent);
  const designContent = useSelector(displayDesignContent);

  const makeCapital = (words) => words.replace(/^\w/, (c) => c.toUpperCase());

  return (
    <div className="container">
      <div className="topics-list">
        <div className="topic-row mb-5">
          <h2 className="topic-heading mb-4">Software Development</h2>

          <ContentCard data={techContent} capitalize={makeCapital} />
        </div>

CHILD COMPONENT

export default (props) => (
  <div>
    <div className="resource-list">
      {props.data.map((item) => (
        <a key={item.id} href={item.link} className="resource-card-link mr-3">
          <div className="card resource-card mb-2">
            <div className="card-header">
              <h4 className="resource-title">{item.title}</h4>
              <span className="resource-creator">by: ***{props.capitalize({item.creator})}***.</span> <--this function
            </div>

            <div className="card-body py-3">
              <div className="resource-description mb-2">
                {item.description}
              </div>
              <div className="resource-type mb-2">
                <i className="fas fa-book"></i> {item.type}
              </div>

Upvotes: 0

Views: 80

Answers (1)

S. Hesam
S. Hesam

Reputation: 6643

The curly braces around of item.creator are redundant.

export default (props) => (
  <div>
    <div className="resource-list">
      {props.data.map((item) => (
        <a key={item.id} href={item.link} className="resource-card-link mr-3">
          <div className="card resource-card mb-2">
            <div className="card-header">
              <h4 className="resource-title">{item.title}</h4>
              <span className="resource-creator">by: ***{props.capitalize(item.creator)}***.</span> <--this function
            </div>

            <div className="card-body py-3">
              <div className="resource-description mb-2">
                {item.description}
              </div>
              <div className="resource-type mb-2">
                <i className="fas fa-book"></i> {item.type}
              </div>

Upvotes: 3

Related Questions