CODEWITHSUNDEEP
reactjstypescript
mo_maat
mo_maat

Reputation: 2240

Reactjs using typescript render output html formatting

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

Upvotes: 0

Views: 503

Answers (2)

Wolfie
Wolfie

Reputation: 1381

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.

Upvotes: 0

Ezz
Ezz

Reputation: 544

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>
                    ],
                )}

Upvotes: 2

Related Questions