You can only use a parameter initializer within the implementation of a function or constructor

Question

You can only use a parameter initializer within the implementation of a function or constructor

I recently started learning TypeScript and am currently using it for React Bricks. I've been working on rendering a 3D object with three.js, but I keep encountering the error mentioned above. I've attempted various solutions such as passing colorMap as an argument in the function and declaring it outside of the function scope, yet the error persists.

import 'bootstrap/dist/css/bootstrap.css';
import React, { Component } from "react";
import { useLoader } from "react-three-fiber";
import { TextureLoader } from "three/src/Three";
import logo from "../react-bricks/bricks/images/logo.jpg"


const Box: React.FC = (colorMap) => (
  const colorMap=useLoader(TextureLoader,logo.src);
  
   
    
    <mesh rotation={[90,0,20]}>
        <boxBufferGeometry attach="geometry" args={[3,3,3]}/>
        <meshStandardMaterial map={colorMap}/>
    </mesh>
  )

export default Box;

reactjs typescript three.js

Answer 1

Answer №1

In your code, you have a statement (const color = ___) where an expression is required (within ()). The arrow function you're using is in concise form and needs to be changed to full form by adding {} after =>.

To fix this issue, update the code as follows:

const Box: React.FC = (props) => { // <== {
    const colorMap = useLoader(TextureLoader, logo.src);

    return ( // <== return
        <mesh rotation={[90, 0, 20]}>
            <boxBufferGeometry attach="geometry" args={[3, 3, 3]} />
            <meshStandardMaterial map={colorMap} />
        </mesh>
    );
}; // <== }

I also changed colorMap to props within the parameter list, assuming you intended to pass props into the component. Remember that function components receive props as an object which can be destructured for easy access.

If logo is a prop, you can define the component like this:

const Box: React.FC<ThePropsObjectType> = ({logo}) => {

Here, ThePropsObjectType represents the set of props expected by Box, with a logo prop.

Answer 2

In your code, you have a statement (const color = ___) where an expression is required (within ()). The arrow function you're using is in concise form and needs to be changed to full form by adding {} after =>.

To fix this issue, update the code as follows:

const Box: React.FC = (props) => { // <== {
    const colorMap = useLoader(TextureLoader, logo.src);

    return ( // <== return
        <mesh rotation={[90, 0, 20]}>
            <boxBufferGeometry attach="geometry" args={[3, 3, 3]} />
            <meshStandardMaterial map={colorMap} />
        </mesh>
    );
}; // <== }

I also changed colorMap to props within the parameter list, assuming you intended to pass props into the component. Remember that function components receive props as an object which can be destructured for easy access.

If logo is a prop, you can define the component like this:

const Box: React.FC<ThePropsObjectType> = ({logo}) => {

Here, ThePropsObjectType represents the set of props expected by Box, with a logo prop.

You can only use a parameter initializer within the implementation of a function or constructor

Answer №1

Similar questions

Passing "this" to the context provider value in React

Leveraging the Spread Operator in Redux mapDispatchToProps with SweetAlert2

Only include unique objects in the array based on a common property

"Combining server-side rendering with client-side rendering for optimal SEO

Steps for transitioning a VUE JS project to TypeScript

React is inferring the type of the 'charts' property in the object literal as 'any[]'

React is producing a collection of <td>'s

The function cannot be accessed during the unit test

Having difficulty in utilizing localStorage to update the state

Retrieve the original state of a ReactJs button from the database

Explore a variety of images within an array using Gatsby and Markdown documents

Develop a customized interface for exporting styled components

Using nodemailer to send an email with a dynamic variable that holds the HTML content

What could be causing my MERN / Passport User Login to fail to redirect upon successful login?

An issue occurred while attempting to retrieve Firebase data using an HTTP GET request

Implementing relative path 'fetch' in NextJs App Router

The conflict arises when importing between baseUrl and node_modules

Loading static assets dynamically in React Native WebView

Transferring data between modules using Ajax or services in React.js

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form