display the information stored within the sports attribute using React

  • I am attempting to display the values stored in the sports property.
  • So, I inserted a console log within the sports property.
  • However, an error is being thrown: 
    Syntax error: C:/codebase/src/containers/sports.js: Unexpected token, expected , (367:22)
  • I looked into ways to display the values - should I place if conditions inside a method and then call it here?
  • Is there a simpler method to display player.west.sports?
  • Below is the snippet of my code:
<GeoJSON
   data={West}
   onEachFeature={this.onEachFeature}
   ref="west"
   style={
      map.region === "west" ? this.getNewStyle : this.getWhiteStyle
   }
   sports={
      {console.log(" player.west.sports--->", player.west.sports)}
      map.region === "west" ? (
         player.west.sports
      ) : (
         player.white.sports
      )
   }
/>
javascripthtmlcssreactjsredux

Answer №1

One way to achieve this is:

sports={(console.log(player.west.sports), (map.region === 'west'
  ? player.west.sports
  : player.white.sports
))}

This approach makes use of the comma operator in javascript, which evaluates two expressions and returns the last one.

However, it is not recommended to use console.log inside a component property as it can make the code less readable. It is better to log it above your JSX, for example at the beginning of your render function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pattern for Ajax callback in Javascript

I'm facing an issue with the code snippet below. var bar = { ajaxcall : function(){ var _obj = {}; $.ajax({ headers: { 'Content-Type': "application/json; charset=utf-8", 'da ...

javascriptjqueryhtml

Render function in Next.js did not yield anything

Recently, I came across the next.js technology and encountered an error. Can anyone help me solve this issue? What could be causing it?View image here import React from 'react' import Button from "../components/button" function HomePa ...

javascriptreactjsnext.js

The Angular UI Datepicker is not reflecting changes in scope variables within the dates-disabled function

I'm currently working with AngularJS and the Angular UI Bootstrap. I've encountered an issue that I initially thought was related to scope, then initialization, but now I'm stuck trying to figure out what's causing the problem. I' ...

javascriptangularjsdatepickerangular-ui-bootstrap

Error message: Invalid credentials for Twitter API authentication

My attempts to post a tweet seem to be failing for some reason. I suspect that the issue might be related to the signature string, but from following Twitter's instructions on signing requests, everything appears correct. Here is the code snippet I ...

javascriptangularjstwitter

What is the best way to show the user profile on a Forum?

I am struggling to figure out how to display the username of a user on my forum page. I currently only have access to the user's ID and need help in extracting their name instead. It seems that I lack knowledge about mongoose and could really benefit ...

javascriptreactjs

Exploring the integration of Jest/Enzyme for testing React components while maintaining JSS style encapsulation

I've been facing some challenges while testing my React components with Jest due to the encapsulation of JSS components. Here's a pseudo code example: JSS(style.js): export default { pinkOnYellow: { color: 'pink', b ...

reactjsmaterial-uienzymejestjsjss

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

javascriptandroidjqueryhtmlwebview

JavaScript - changing object into a string (not functioning properly)

Looking to convert a JavaScript object into a string? Here's an example: var obj = {"name": "XXX", "age": "27"}; After doing some research, I found out about JSON.stringify(obj); JSON.stringify(obj); works perfectly when the IE8 modes are set as fo ...

javascriptjsoninternet-explorer-8ie8-browser-mode

What is the correct way to add a library to webpack configuration?

Currently, I am working with Rails 6 and webpack in my project. I am interested in integrating the library jquery-textcomplete, but I am unsure about how to properly include it in the application.js file. Here are the steps I have taken so far: I instal ...

javascriptjqueryruby-on-railswebpackruby-on-rails-6

Interactive search functionality using jQuery

In the panel I have, I would like to include a search input field that allows users to type in a word. As soon as a match is found, that specific word will be highlighted within the panel while the other information disappears. ...

javascriptjqueryjquery-ui

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

pythonhtmlcssflaskjinja2

Can you point me in the direction of some resources for developing a custom plugin with stylelint?

After visiting the stylelint website and github, I downloaded it locally using npm. The stylelint website suggests using the following format to create my own plugin: var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOpt ...

cssnpmsasspostcssstylelint

Attempting to have this .js lightbox appear as soon as the page loads

This Lightbox is absolutely stunning! However, I am looking for a way to automatically trigger the lightbox when the page loads. ...

javascriptjquerylightbox

Utilizing jQuery Ajax to retrieve a multitude of data

Utilizing jQuery AJAX to retrieve a string from PHP containing JavaScript, PHP, and HTML has been successful for me using the code below: header("Content-Type: text/html"); echo $content; $.ajax({ type: 'POST', url: url, data: data, ...

javascriptphpjqueryjsonajax

Preserve the previous and current state within a React application

Within my code, there is a state called newuser that undergoes changes based on the inputs entered into the input fields. This change occurs once all input fields are filled and the submit button is clicked. The goal I have in mind is to store the current ...

javascriptreactjs

Modal - sending data through URL

I am trying to create a modal that will open another view using a URL in script, but instead it just opens a blank pop-up and doesn't redirect to the URL. I have attempted various approaches, but none seem to be working. Adding <div class="modal-b ...

jqueryhtmlmodel-view-controllermodal-dialog

Example of Node-gallery used in isolation, displaying an error event with the message "ENOENT"

I am currently experiencing an issue with the node-gallery npm module. After installing dependencies inside the /example directory, I attempted to run the app. The result was a localhost:3000/gallery page, but upon the page fully loading, I encountered the ...

javascriptnode.jsnpmimage-gallery

What is the best way to redirect a URL to include www using Node.js?

What is the best way to redirect a URL to start with www? For instance: ---> ...

javascriptnode.jsexpress

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

jqueryhtmlcsstooltipmousehover

Attempting to compare the HTML datetime with the current time in order to implement conditional formatting

I am working with a SharePoint discussion list that includes a field named "Last Updated." My goal is to identify and highlight rows where the last update was more than 1 hour ago. Here is my current approach: <html> <head> <sc ...

javascriptjquerysharepointjquery-selectors