This is inside Class component (d is reurning date objects, set is settings component)

 Maanantai = new DayLayout(d.state.maanantai)
  Tiistai = new DayLayout(d.state.tiistai)
  Keskiviikko = new DayLayout(d.state.keskiviikko)
  Torstai = new DayLayout(d.state.torstai)
  Perjantai = new DayLayout(d.state.perjantai)
  Lauantai = new DayLayout(d.state.lauantai)
  Sunnuntai = new DayLayout(d.state.sunnuntai)
  set = new Settings

  return (
    <div>
      <div><h3>Otsikko palkki</h3></div>
      {(() => {
        if (set.getWeekstart != "Maanantai") {
          return (
            <Sunnuntai/>
          )
        }
      })()}
      <Maanantai/>
      <Tiistai/>
      <keskiviikko/>
      <Torstai/>
      <Perjantai/>
      <Lauantai/>
      {(() => {
        if (set.getWeekstart == "Maanantai") {
          return (
            <Sunnuntai/>
          )
        }
      })()}
    </div>
  );

I am trying to render multiple week day tables. How ever VisualStudio code displayis errors in this code and ot dont work. Somehow it dont acccept acept new classes as objects, is there way a from and component from class object?

CodePudding user response：

instead of

{(() => {
        if (set.getWeekstart != "Maanantai") {
          return (
            <Sunnuntai/>
          )
        }
      })()}

use this

{set.getWeekstart != "Maanantai" && <Sunnuntai/> }

or

{set.getWeekstart != "Maanantai" ? <Sunnuntai/>  : null}

CodePudding user response：

Some approaches you can try

const SomeComponent = (props) => {

  // if you dont want new Settings() to be called on every render
  const settings = useMemo(() => {
  
     return new Settings()

  }, []) // dependencies for settings or just move settings out of the component

  const Tiistai = useMemo(() => {
      // if you need to construct the component in a specific way
      // const propsCreator = new DayLayout(d.state.tiistai)
      // return (props) => <RenderComponent {...props} {...propsCreator.getProps() } />
      return (props) => <DayLayout {...props} state={d.state.tiistai} />

  }, [d.state.tiistai]) 
  

  return (
     ...
     // approach one
     <Maanantai state={d.state.maanantai} />
    // approach two
    <Tiistai/>
    ...
  )

}

Hope it helps you in some way

CodePudding user response：

got it working, thax all reposponses, they were very helpfull:

import React from "react";
import DayLayout from "./komponentit/day";
import Settings from "./settings"
import Dates from "./komponentit/dates";

var n = new date();
var d = new Dates(n)
//Eli daylayout tarvii tietää milloinkin aktiivisen viikon
//pitää hakea pvm atlasianiasta tai hakea nykyinen viikk
set = new Settings

class ViikkoLayout extends React.Component {
  state = {
    Projektit: '',
    Tasks: '',
    pvm: '',
    date: '',
    week: ''

  };
  /*const [columns, setColumns] = useState(columns);*/
  // Pitää editoida tähän asetusten mukainen muutos onko MA vai SU ekapaiva

  render() {
    return (
      <div>
        <h3>Otsikko palkki</h3>
        {set.getWeekstart != "Maanantai" && <DayLayout day={...d.state.sunnuntai}/> }
        <DayLayout day={...d.state.maanantai}/>
        <DayLayout day={...d.state.tiistai}/>
        <DayLayout day={...d.state.keskiviikko}/>
        <DayLayout day={...d.state.torstai}/>
        <DayLayout day={...d.state.perjantai}/>
        <DayLayout day={...d.state.lauantai}/>
        {set.getWeekstart == "Maanantai" && <DayLayout day={...d.state.sunnuntai}/> }
      </div>
    )
  }
}

export default ViikkoLayout;