Related questions

To Use this.props in constructor of subclass in react ,we need to call super(props), Confused about this statement?

2021-01-26 10:53 Ankur imported from Stackoverflow 
class MyComponent extends React.Component {    
constructor(props) {
    super()

    console.log(this.props)
    // -> undefined

    // Props parameter is still available
    console.log(props)
    // -> { icon: 'home', … }
}

render() {
    // No difference outside constructor
    console.log(this.props)
    // -> { icon: 'home', … }
}

} I saw the above code snippet in one answer but my doubt is about the confusion on (this), if we are calling using this it refers to the current instance of the class, so if we are passing the props to the subclass, then why we need to call explicitly super(props) not super() only, I am not able to get the exact reason after reading many answers ...Please explain in brief..I am a newbie in React..

See also questions close to this topic

  • How to pass the values to point json object in ReactJs

    I am new to ReactJS, I would like to fetch the Firstname based on active language selected using React

    language file.Json

    {"activelanguage":"English",
  "English":
       {
        "id":1,         
        "first_name": "First name",
        "last_name": "Last name",
        "email": "Email",
        "password": "Password",
        "mobile": "Mobile Phone"
      },
    "தமிழ்":{
          "id":2,
          "first_name": "முதல் பெயர்",
          "last_name": "கடைசி பெயர்",
          "email": "மின்னஞ்சல்",
          "password": "கடவுச்சொல்",
          "mobile": "கைபேசி எண்"
      }
    }

    What i have used in the ReactCode;

    var activelanguage="English";
var firstName=languagelist.{activelanguage}.first_name;

    Thanks in advance

  • Realtime Chart in reactjs 
    import React, { useState, useEffect } from 'react';
import './App.css';
import { Line, LineChart, XAxis, YAxis } from 'recharts';

import socketIOClient from 'socket.io-client';
const ENDPOINT = 'http://192.168.1.45:4001';
function App() {
  const [data, updateData] = useState([]);
  const socket = socketIOClient(ENDPOINT, {
    transports: ['websocket', 'polling'],
  });
  useEffect(() => {
    socket.on('a', (a) => {
      updateData((currentData) => {
        const ab = [...currentData, a];
        return ab.length <= 200 ? ab : ab.splice(1);
      });
    });
  }, []);

  return (
    <div className='App'>
      <h1>size of data is :- {data.length}</h1>
      <LineChart width={1000} height={500} data={data}>
        <XAxis dataKey='name' />
        <YAxis />
        <Line dataKey='value' />
      </LineChart>
    </div>
  );
}

export default App;

    Up here is the code for real-time chart in react I am having a socket.io connection and the server is emitting at least 150 values per second. Chart is working fine on the first 60 seconds but after that, it start lagging. I can't able to pinpoint the issue here.

    I asked this before also where Nick helped me achieve this result, but it's not smooth yet. help is much appreciated

  • TypeError: checkBoxes.map is not a function

    Me encuentro desarrollando una aplicación con react.js, pero no marca el error TypeError: checkBoxes.map is not a function. Aquí el código.

    import Button from "./components/Button";
import Checkbox from "./components/Checkbox";
import {useState} from "react";

const Form = () => {

    const [checkBoxes,setCheckBoxes] = useState([
        {id:1, value: "Edicon de video", isChecked: false},
        {id:2, value: "Ofimatica", isChecked:false},
        {id:3, value: "Diseño grafico", isChecked: false},
        {id:4, value: "Inteligencia artificial", isChecked: false},
        {id:5, value: "Modelado 3D", isChecked: false},
        {id:6, value: "Videojuegos", isChecked: false}
    ]);

    const checkBoxHandler = (id) =>{
        let checkBox = checkBoxes; let checkAux;
        checkBox.map(check => {
            if(check.id===id) checkAux = {...checkBox, isChecked: !check.isChecked}
            else check.isChecked = false;
        });
        setCheckBoxes(checkAux); 
    }
    
    
    return (
        <div className="form">
        <form className="info-form">
            <div className="form-control">
                <label>¿Trabajo al que va enfocado el equipo?</label>
                <div className="form-control form-control-check">
                    <dl>
                        {checkBoxes.map((check,index) =>{
                            return (<Checkbox id={index} value={check.value} checked={check.isChecked} onClick={checkBoxHandler} />);
                        })}
                    </dl>
                </div>
            </div>
            <div className="form-control">
                <label>Presupuesto</label>
                <input type="number" placeholder="$ Margen minimo"/>
                <input type="number" placeholder="$ Margen maximo"/>

            </div>
            <div className="form-control">
                <label>¿Que marca de procesador prefieres?</label>
                <p align="center"><img src="/images/Intel.png"/><img src="/images/Amd.png"/></p>
            </div>
            <Button to="/Application" text="A darle"> A darle </Button>
        </form>
        </div>
    );
}

export default Form;

    Codigo del componente CheckBox:

    import PropTypes from "prop-types";

const Checkbox = ({id,value, onClick, checked}) => {

    return (
        <dt>
            <div className="form-control-check-alignment">
                <p> {value} </p><input key={id} checked={checked} value={value} type="radio" onClick={onClick(id)} />
            </div>
        </dt>
    )
}

export default Checkbox;

    Sigo estudiando tanto react.js como javascript, pero realmente me cuesta encontrar el origen de este error. Gracias