How to give a property to an image in ReactDOM?

Question

WordPress

How to set a property for the image to the component, just like he gave the name property.

<script type="text/babel">
            var TeamCard = React.createClass({
                render: function () {
                    return  (
                        <article class="open hidden">
                            <img class="article-img" src="svg/charlotte-hornets.svg" alt={this.props.name} />
                                <h1 class="article-title">
                                    <a href="">{this.props.name}</a>
                                </h1>
                        </article>
                    )
                }
            })

            ReactDOM.render(
                <div>
                    <TeamCard image-path="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                    <TeamCard image-path="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                </div>,
                document.getElementById("cards")
            )
        </script>

PS I'm sorry for such a description of the question, I don't know how to paraphrase correctly)

Answer 1

such a decision would be a crutch. since right now you have done - the most normal option. so it's better not to. and so you can write a script to have a modal. and when you click on the pictures - this modal opens and these pictures are appended there

Answer 2

Also, just don't separate property names with hyphens or underscores.

<script type="text/babel">
            var TeamCard = React.createClass({
                render: function () {
                    return  (
                        <article className="open hidden">
                            <img className="article-img" src={this.props.imagePath} alt={this.props.name} />
                                <h1 className="article-title">
                                    <a href="">{this.props.name}</a>
                                </h1>
                        </article>
                    )
                }
            })

            ReactDOM.render(
                <div>
                    <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                    <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                </div>,
                document.getElementById("cards")
            )
        </script>

PS: write className instead of class, this is a feature of jsx