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

Transform the API response from a string into an array containing multiple objects

How can I transform a string API response into an array of objects? When making a GET request, the result is returned as a single long string: const state = { strict: true, airports: [] }; const getters = { allAirports: (state) => state.ai ...

javascriptvue.jssplit

Trouble with jQuery script causing initial word count issue in textarea upon page load

I have implemented a word count textarea jQuery script and I am trying to figure out how to update the word count onload to 2 when the text area initially displays "this example". Currently, it shows 0 words. Although I can set focus on it and move the c ...

javascriptjqueryhtmlcountwords

What is preventing me from choosing the complete table?

I am currently working on a method to export tabular data from an HTML page to Excel using DocRaptor. My approach involves using PHP to pass the necessary data through their API for conversion into an Excel Spreadsheet. However, I have encountered an issu ...

jqueryhtmlcss

Create a PDF document using a combination of charts and tables

When I try to create a PDF file with both the chart and table embedded, only the table is showing up. Can someone please provide me with some suggestions on how to resolve this issue? JSFIDDLE LINK ...

javascriptjquerychart.jsjspdf

Encountering a 404 error when reloading the page or pasting a URL in a MERN

I am currently working on a website that utilizes the MERN stack and is hosted on an Apache server. The setup involves a proxy (& reverse proxy) settings on /api to route requests to ip:port/api. Recently, I have been facing an issue where any page refres ...

reactjsexpresshttp-status-code-404reloadmern

Issue with Material UI Textfield error functionality in React.js not functioning correctly

Currently, I am working on a functional component in combination with Material UI. Within this setup, I have constructed a form comprising of 2 textfields. My objective is to activate the error property solely under certain conditions being met. However, t ...

javascriptreactjsmaterial-ui

Turn off laptop camera to assess web application functionality in the absence of a camera on the device

In the process of creating an automated testing framework in Java and Selenium, I have encountered a scenario where I need to examine how a web application behaves when accessed by a user with a device lacking a camera. Is there a method to simulate this ...

javascriptjavaselenium

Utilize jQuery to toggle the visibility of one specific div among others with the same class

I'm currently working on a comment and like system similar to Facebook. However, I am struggling to select the specific div element! Here is a snippet of my current HTML: <div class='activoptions'><a href='#'>Like< ...

jqueryhtmlcss

Can we implement a variety of site designs based on the size of the window?

Utilizing media queries allows us to modify the CSS for various screen sizes. My inquiry is: can we switch to a completely different page layout (or View in MVC) when the window size, specifically when the width is less than 500? Assuming that the control ...

cssasp.net-mvc

What are some strategies for navigating the constraint of having multiple root elements in Vue.js?

Seeking assistance from the experts here to solve this particular issue. I have a dataset that looks like this: [ { title: 'Header', children: [ { title: 'Paragraph', children: [], }, ], }, ...

javascriptvue.js

What is the best way to rearrange Bootstrap columns for extra small screens?

In my bootstrap layout, I have a row with two columns: <div class="row"> <div class="col-md-5 col-md-push-7"> Content in this column should display on the right </div> <div class="col-md-7 col-md-pull-5"> ...

csstwitter-bootstraptwitter-bootstrap-3

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

phphtmlmysql

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

htmlcssfirefoxopera

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

Utilizing variable values in Google Charts with AngularJS

Hello everyone, I am attempting to display a chart using data obtained from an API. The output of the API is in the form of List<String> and not in JSON format. Here is the snippet of my JS file: google.load('visualization', '1', ...

javascriptangularjsgoogle-visualization

Unable to display Apexcharts bar chart in Vue.js application

Struggling to incorporate Apexcharts into my Vue.js site, but unfortunately, the chart isn't appearing as expected. -For more guidance on Apexcharts, check out their documentation Here HTML <div class="section sec2"> <div id="chart" ...

javascriptvue.jschartsapexcharts

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

Could someone help me figure out why this jQuery code is not functioning properly? I have already tested it outside the $(document).ready block with no success. Note: The unusual "{{ }}" and "{% %}" syntax is typically used in Django. jQuery $(document) ...

javascriptjqueryhtmldjango

How do I incorporate global typings when adding type definitions to an npm module?

Suppose I create a node module called m. Later on, I decide to enhance it with Typescript typings. Luckily, the module only exports a single function, so the m.d.ts file is as follows: /// <reference path="./typings/globals/node/index.d.ts" /> decl ...

javascriptnode.jstypescriptnpm

I'm having trouble getting my website to align in the center of the

Struggling to center my website no matter what I try. I experimented with different CSS properties but haven't had much luck. margin: auto 0; I also attempted the following: margin-left: 50%; margin-right: 50%; The closest I got was aligning every ...

css

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

javascriptphphtmlcss