Challenge with Transferring Data to be Displayed

Question

Challenge with Transferring Data to be Displayed

My issue lies in calling a function with 3 inputs - 2 numbers and 1 string. The two numbers are being passed correctly, but I need the string to be printed within the element.

I suspect the problem is related to passing the parameter to an HTML part of the code, but I am unsure how to solve it.

import Typography from '@material-ui/core/Typography';    


export function myfunction(name, min max){
    const midpoint = Math.ceil((min + max)/2)
    return(
    <div>
        <Typography id="input-slider">
            name //this is where I want name to be
        </Typography>
    <div/>
    )
}

In another file, this function is called as follows:

function main(){
    return(
        <div>
            {myfunction(MYNAME, 0, 10)}
        <div/>
    )
}

javascript material-ui pass-by-value

Answer 1

Answer №1

When creating a function myFunction as a react component, you are essentially defining a function that takes a properties object as the first argument and returns JSX.

An important point to note is that your myFunction should only accept three arguments to be considered a proper react component.

Here is an example of how a correct react component could be structured:

function MyAwesomeComponent({ name, min, max }) {
  const midpoint = Math.ceil((min + max) / 2);
  // Use curly braces around variables like {midpoint} to output their values
  return <Typography id='input-slider'>{name}</Typography>;
}

If you want to use this component within another react component, such as in the case of the main function, it's important to define it as a separate react component too.

function Main() {
  return <MyAwesomeComponent name={'YourName'} min={0} max={10} />;
}

I hope this clarifies any doubts you may have had. To dive deeper into the topic of writing react components, I highly recommend exploring the official react documentation for more insights.

Answer 2

When creating a function myFunction as a react component, you are essentially defining a function that takes a properties object as the first argument and returns JSX.

An important point to note is that your myFunction should only accept three arguments to be considered a proper react component.

Here is an example of how a correct react component could be structured:

function MyAwesomeComponent({ name, min, max }) {
  const midpoint = Math.ceil((min + max) / 2);
  // Use curly braces around variables like {midpoint} to output their values
  return <Typography id='input-slider'>{name}</Typography>;
}

If you want to use this component within another react component, such as in the case of the main function, it's important to define it as a separate react component too.

function Main() {
  return <MyAwesomeComponent name={'YourName'} min={0} max={10} />;
}

I hope this clarifies any doubts you may have had. To dive deeper into the topic of writing react components, I highly recommend exploring the official react documentation for more insights.

Answer 3

Answer №2

For passing the parameter within the HTML tags, it is recommended to use a template literal. Your code should look like this:

export function myfunction(name, min max){
    const midpoint = Math.ceil((min + max)/2)
    return(
    <div>
        <Typography id="input-slider">
            ${name}
        </Typography>
    <div/>
    )
}

Answer 4

For passing the parameter within the HTML tags, it is recommended to use a template literal. Your code should look like this:

export function myfunction(name, min max){
    const midpoint = Math.ceil((min + max)/2)
    return(
    <div>
        <Typography id="input-slider">
            ${name}
        </Typography>
    <div/>
    )
}

Challenge with Transferring Data to be Displayed

Answer №1

Answer №2

Similar questions

Solving Promises with Arrays in JavaScript

Showing a notification on the screen upon redirection to the index page

An error was encountered: An identifier that was not expected was found within the AJAX call back function

Having trouble with jQuery div height expansion not functioning properly?

Angular routing template failing to execute inline JavaScript code

Record every function within the array prototype

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

Executing program through Socket.io alert

Implementing Real-Time Search Feature Using AJAX

Unexpected behavior with VueJS Select2 directive not triggering @change event

UI changes are not appearing until after the synchronous ajax call

PhpStorm alerts users to potential issues with Object methods within Vue components when TypeScript is being utilized

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

Jquery's ajax function is failing to execute the server side function

The data structure '{ variableName: string; }' cannot be directly assigned to a variable of type 'string'

Mongoose/JS - Bypassing all then blocks and breaking out of the code

Navigating through div elements using arrow keys in Vue

Exploring the foundational element within a JSON structure

What are the steps to customizing a package on atmospherejs.com within meteor.js?

retrieve the data-task-IDs from the rows within the table