Reactjs using typescript render output html formatting

Question

why does the following render cause problems. I'm simply trying to output two rows of the same data. It compiles fine, but in my output the two rows of tbody data align to the first column (make) and the rest of the headers are aligned to the right of the two rows of tbody data. I'm just simplifying this code to test with, but ultimately what I want is a second row that has an input field for each column. The input field will allow me to change the corresponding cell value.

I also get:

warning.js:35 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See CarTool > tbody > div. 

warning.js:35 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CarTool > div > tr.

public render() {
        return <div>
            <h1>Car Tool</h1>
            <table>
                <thead>
                    <tr>
                        <td>Make</td>
                        <td>Model</td>
                        <td>Year</td>
                        <td>Color</td>
                        <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                    {this.props.cars.map((car) =>
                        <div>
                            <tr>
                                <td>{car.make}</td>
                                <td>{car.model}</td>
                                <td>{car.year}</td>
                                <td>{car.color}</td>
                                <td>{car.price}</td>
                            </tr>
                            <tr>
                                <td>{car.make}</td>
                                <td>{car.model}</td>
                                <td>{car.year}</td>
                                <td>{car.color}</td>
                                <td>{car.price}</td>
                            </tr>
                        </div>,
                    )}
                </tbody>
            </table>
        </div>;
    }

Make Model Year Color Price Ford Edge 2016 white 42000 Ford Edge 2016 white 42000 Ford Ranger 2006 white 10000 Ford Ranger 2006 white 10000 Chevy Malibu 2012 blue 32000 Chevy Malibu 2012 blue 32000

Ezz · Accepted Answer · 2017-08-05 14:27:31Z

2

Try this

{this.props.cars.map((car, index) =>
                    [
                        <tr key={"value" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>,
                        <tr key={"input" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>
                    ],
                )}

answered Aug 5, 2017 at 14:27

Ezz

5442 gold badges8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mo_maat Over a year ago

thanks! that worked perfect. i'm familiar with the need for an index, i was just putting this together quickly to test. but where is the syntax for rendering multiple rows documented? i want to read upon it. i wouldn't have thought do this based on my limited knowledge thus far of react.

Wolfie · Accepted Answer · 2017-08-05 14:32:44Z

0

It is invalid syntax to have a div element as a child of a tbody.

<tbody>
    {this.props.cars.map((car) =>
        <tr>
            <td>{car.make}</td>
            <td>{car.model}</td>
            <td>{car.year}</td>
            <td>{car.color}</td>
            <td>{car.price}</td>
        </tr>
    )}
</tbody>

Also, don't forget to include key for each element, since you are dynamically creating them via map.

edited Aug 5, 2017 at 14:32

answered Aug 5, 2017 at 14:25

Wolfie

1,3798 silver badges17 bronze badges

Collectives™ on Stack Overflow

Reactjs using typescript render output html formatting

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related