Ways to design each element in React

Question

Ways to design each element in React

I'm currently working on a React code that involves CSS for Scrolling functionality. When I try to use props.children.map, I encounter an error saying "TypeError: props.children.map is not a function". Since I am in the process of learning React.js, this might be a simple mistake on my end. Any guidance or assistance would be highly appreciated. Thank you!

**CustomScrollComponent.js**

import React from 'react';
import './Scroll.css'

const CustomScrollComponent = (props) => {

    return(
        <div class="slider">
        <div class="slide">

        {props.children.map((component) => 
        <div class="slide"> component </div>)
        }

        </div>
        </div>
    );
};
export default CustomScrollComponent;

Scroll.css

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

javascript reactjs map-function

Answer 1

Answer №1

The issue you're encountering is logical because the variable children only holds one ReactNode, while the map function necessitates an array of multiple values.

To address this, consider implementing the following solution:

import React from "react";
import "./Scroll.css";

const Scroll = props => {
  return (
    <div class="slider">
      <div class="slide">{props.children}</div>
    </div>
  );
};
export default Scroll;

Then utilize the Scroll component as follows:

const ParentComponent = () => {
  return (
    <Scroll>
      <div>
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </div>
    </Scroll>
  );
};

Answer 2

The issue you're encountering is logical because the variable children only holds one ReactNode, while the map function necessitates an array of multiple values.

To address this, consider implementing the following solution:

import React from "react";
import "./Scroll.css";

const Scroll = props => {
  return (
    <div class="slider">
      <div class="slide">{props.children}</div>
    </div>
  );
};
export default Scroll;

Then utilize the Scroll component as follows:

const ParentComponent = () => {
  return (
    <Scroll>
      <div>
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </div>
    </Scroll>
  );
};

Answer 3

Answer №2

If you want to convert your CSS into an object, you can do so like this:

const styles = ({
input: {
    display: 'none',
},
pointerBorder: {
    borderWidth: '4px',
    borderStyle: 'dashed',
    borderColor: 'grey',
    paddingTop: '40px',
    paddingBottom: '40px',
},
iconUpload: {
    fontSize: '100px',
    cursor: 'pointer',
}

Simply call the object to use it:

            <div className={styles.input}>

Additionally, try commenting out the code like this:

{props.children.map((component) => 
    <div class="slide"> component </div>)
    }

Then run it again to see if it's not a style issue.

Answer 4

If you want to convert your CSS into an object, you can do so like this:

const styles = ({
input: {
    display: 'none',
},
pointerBorder: {
    borderWidth: '4px',
    borderStyle: 'dashed',
    borderColor: 'grey',
    paddingTop: '40px',
    paddingBottom: '40px',
},
iconUpload: {
    fontSize: '100px',
    cursor: 'pointer',
}

Simply call the object to use it:

            <div className={styles.input}>

Additionally, try commenting out the code like this:

{props.children.map((component) => 
    <div class="slide"> component </div>)
    }

Then run it again to see if it's not a style issue.

Ways to design each element in React

Answer №1

Answer №2

Similar questions

Update all Vue component imports to include the .vue extension at the end

Is GridToolbar compatible with XGrid in React using Material-UI components?

I am having difficulty organizing my text into two grid columns and aligning it in the center

Press the button to reset the text input using the useRef hook

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

Discover the index of the row when the value in the dropdown list is updated

Prevent automatic jumping to input fields

Special characters like greater/less than signs have not been properly encoded

Extract JSON data from Python API

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Using Vue component with v-model and custom input handler

Using ReactJS and react-router to exclude the navigation menu on the login page

The system considers the resource as a script, yet it was transmitted with the MIME type of text

Tips on customizing the easing functions for a drawer in material-ui

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

Error message, 'props is incompatible with empty', appears when attempting to create a Component without passing any props

The functionality of the Vue.js single file component is not performing as anticipated

Just a simple canvas animation

How to toggle tooltip visibility dynamically using Angular 2